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内 容 简 介 


本 书 以 Web 前 端 开发 的 岗位 需求 和 行业 开发 规范 为 基础 ,以 电子 商务 网 站 “叮当 网 上 书店 ”为 导入 
项 目 ,按照 “项 目 导 入 ,任务 驱动 ”的 教学 模式 ,基于 岗位 的 工作 过 程 精心 组 织 和 安排 教学 内 容 。 本 书 内 
容 由 4 个 任务 阶段 组 成 : 网 站 的 前 期 准备 、 网 站 的 结构 架设 、 网 站 的 效果 设计 和 网 站 的 人 机 交互 。 本 书 
的 重点 在 于 采用 XHTML、CSS 和 jQuery 等 前 端 技术 进行 网 站 的 开发 .设计 ,本 书 的 难点 在 于 浏览 器 的 
兼容 性 设计 。 

本 书 将 Web 前 端 开 发 技术 的 知识 和 技能 有 机 地 融 人 各 个 任务 中 ,读者 通过 项 目 任务 的 逐步 实施 ， 
在 学 中 做 ,在 做 中 学 。 本 书 可 作为 高 职高 专 院 校 相关 专业 的 教材 ,也 可 作为 网 站 设计 师 、Web 前 端 开发 
工程 师 `UI 设计 工程 师 等 网 站 设计 与 开发 人 员 的 参考 书 。 
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目前 , 随 着 互联 网 和 移动 Web 应 用 的 不 断 发 展 ,Web 前 端 开 发 正 处 
于 高 峰 期 。 在 Web 2.0 的 热潮 下 ,Web 前 端 开发 的 岗位 (如 网 页 设计 师 、 
前 端 开发 工程 师 、 用 户 体验 分 析 师 ,交互 设计 师 等 ) 需 求 日 益 增 长 ,几乎 每 
个 大 的 互联 网 公司 都 有 属于 自己 的 互联 网 开发 团队 ,如 淘宝 网 的 “淘宝 
UED”、 百 度 旗下 的 “百度 UFO”\、 腾 讯 的 ISD 和 CDC 等 。 

本 书 内 容 

本 书 内 容 以 “叮当 网 上 书店 ”电子 商务 网 站 为 导入 项 目 , 按 照 行业 工 
作 过 程 将 项 目 分 解 为 4 个 阶段 13 个 任务 ,模拟 企业 岗位 情景 ,让 读者 身 
临 其 境地 进行 学 习 和 开发 。 

任务 1 主要 介绍 网 站 项 目 需求 分 析 的 两 大 块 设计 : 页 面 元 素 级 和 网 
站 功能 级 的 需求 分 析 应 该 做 些 什么 和 怎么 做 ,让 读者 了 解 整个 行业 网 站 
项 目 需求 分 析 的 大 概 流程 。 

任务 2 和 任务 3 主要 介绍 网 站 项 目的 DEMO( 快 速 原 型 ) 和 网 站 图 片 
素材 的 整理 和 设计 ,为 项 目的 实施 做 好 基础 工作 。DEMO 采用 的 是 手绘 
设计 稿 的 方法 ,重点 介绍 了 网 站 常用 的 版 式 设计 。 图 片 素材 的 制作 和 设 
计 主 要 采用 Photoshop CS 软件 来 进行 ,可 以 培养 读者 的 设计 技能 和 设计 

任务 4 一 任务 7 主要 介绍 Dreamweaver CS6 网 页 设计 软件 的 使 用 技 
巧 和 技能 ,以 及 XHTML 语言 和 常用 结构 标签 ,培养 读者 在 Web 2. 0 标 
准 下 的 DIV 十 CSS 布局 思想 。 我 们 强调 尽量 采用 合适 的 标签 来 进行 页 面 
及 模块 结构 的 设计 ,以 提高 读者 使 用 XHTML 语言 编写 代码 的 质量 。 

任务 8 一 任务 12 主要 介绍 CSS 样式 。 因 为 CSS 是 Web 标准 中 的 一 
项 核心 技术 ,因此 本 书 分 了 5 个 任务 的 篇 幅 来 介绍 。 从 盒子 模型 、 浮 动 、 
文档 流 、 定 位 .CSS 样式 表 、CSS 缩写 ,CSS 的 浏览 器 兼容 性 等 方面 进行 了 
详尽 的 分 析 和 介绍 。 对 项 目的 开发 进行 了 精细 化 管理 和 把 控 , 让 读者 能 
够 真正 理解 知识 和 掌握 技能 。 

任务 13 主要 介绍 采用 jQuery 框架 进行 表单 验证 。 对 于 没有 JavaScript 
基础 的 读者 来 说 ,可 以 采用 目前 比较 流行 的 效果 比较 丰富 的 jQuery 框架 
来 进行 网 站 交互 的 开发 和 设计 ,实现 网 站 的 交互 效果 。 
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本 书 特色 

(1) 以 “项 目 导 入 、 基 于 工作 工程 分 解 任 务 " 组 织 和 编写 教材 内 容 , 模 拟 企业 开发 情 
景 ,让 读者 在 “做 中 学 ,学 中 做 ”。 

(2) 注重 代码 编写 质量 ,由 点 到 面 、 由 简 到 难 ,以 “公用 性 、 复 用 性 ”为 原则 逐步 重 构 项 
目的 代码 ,有 利于 读者 真正 掌握 Web 前 端 开发 的 技术 和 技巧 。 

读者 对 象 

目前 ,许多 网 站 设计 师 开 始 学 习 并 应 用 Web 标准 ,学 习 Web 前 端 开发 技术 
(XHTML、CSS、jQuery 和 Ajax 等 )。 本 书 适合 所 有 网 站 设计 师 、Web 前 端 开发 工程 师 、 
UI 设计 工程 师 等 网 站 设计 与 开发 人 员 。 本 书 将 Web 前 端 开 发 技术 的 知识 和 技能 有 机 地 
融入 各 个 任务 ,读者 通过 任务 的 逐步 实施 ,在 学 中 做 ,在 做 中 学 。 本 书 在 Web 2.0 标准 
下 ,采用 DIV 十 CSS 布局 对 项 目 进行 开发 设计 ,对 CSS 代码 进行 了 不 断 的 重 构 , 探 讨 了 浏 
览 器 兼容 性 并 提供 了 一 些 常用 的 解决 方案 ; 针对 初学 的 读者 ,还 加 入 了 jQuery 的 交互 设 
计 ,为 读者 从 人 门 到 精通 打下 坚实 的 基础 。 

脚本 代码 

书 中 提供 了 大 量 的 XHTML 与 CSS 代码 ,用 以 帮助 读者 完成 本 书 项 目 。 由 于 篇 幅 有 
限 ,编者 不 可 能 将 整 篇 网 站 项 目的 代码 放置 其 中 ,因此 针对 代码 作 了 相应 的 注释 和 格式 的 
排版 。 

例如 ,下 面 代码 中 未 加 粗 和 未 倾斜 的 代码 是 延续 前 面 任务 完成 后 的 CSS 代码 ,而 加 
粗 和 倾斜 的 代码 是 针对 本 任务 添加 的 新 的 CSS 代码 ,编者 加 入 了 详尽 的 注释 ,以 帮助 读 
者 更 好 地 理解 和 掌握 。 


/修改 yuanjiao_center, 实 现 离 左 侧 20px, 垂直 方向 居中 */ 


.yuanjiao_center{ 


float: left; 

height:27px; 

Uine-height:27px; 人 * 通过 设置 /ine-height 的 值 与 height 的 值 来 实现 文本 垂直 
方向 居中 */ 

padding-left:20px; /* 通过 设置 padding-lef/t 的 值 来 实现 离 左 侧 的 间距 */ 

Width: ISApxs /人 * 根据 盒子 模型 ,设置 padding-le/t 的 值 为 20px 。 要 使 整 
个 盒子 的 宽度 不 变 ,应 将 盒子 的 mdbp 相应 地 减 去 20px， 
因此 修改 widzh 的 值 为 954 像素 */ 


background-image:url(. . /images/head_yj_center.jpg) ; 

background-repeat: repeat-x; 

background-position :left top; 
} 
/添加 .yuanjiao_center a 和 .yuanjiao_center a:hover 的 超 链 接 样式 及 伪 类 样式 */ 
.yuanjiao_center a{ 

padding:0 10px 0 5px; 

margin:0; 

color: # FFFFFF; 

text-decoration: none; 


.yuanjiao_center a:hover{ 
text-decoration: underline; 
} 
/* 添 加 .yuanjiao_center span 样式 ,实现 超 链接 之 间 垂 直 分 隔 线 的 效果 * / 
.yuanjiao_center span{ 
color: # efefef; 
margin-right: 5px; 


} 


项 目 介绍 

本 书 选取 “叮当 网 上 书店 ”电子 商务 网 站 作为 本 书 的 导入 项 目 , 主 要 是 考虑 到 本 书 的 
读者 基本 都 有 过 网 购 的 经 历 或 者 对 电子 商务 网 站 有 一 定 的 了 解 。 一 方面 ,读者 可 以 很 好 
地 理解 网 站 的 业务 流程 和 页 面 流转 ; 另 一 方面 ,本 项 目 能 够 涵盖 Web 前 端 开发 的 大 部 分 
知识 点 和 技能 。 

本 书 项 目 网 站 通过 了 IE 6 一 IE 9、Chrome、Firefox 等 主流 浏览 器 的 兼容 性 测试 。 通 
过 对 本 项 目的 学 习 和 实践 ,读者 能 够 掌握 一 定 的 浏览 器 兼容 性 设计 技能 和 技巧 ,提升 读者 
的 岗位 竞争 能 力 。 

本 书 主要 创作 团队 为 课程 组 的 汤 明 伟 、 崔 鞍 、 何 售 、 郑 伟 老 师 , 郑 柳 娟 老师 对 全 书 进行 
了 总 审 。 当 然 也 离 不 开 家 人 和 其 他 领导 同事 的 关心 和 支持 ,在 此 一 并 表示 真挚 的 感谢 。 

由 于 编者 水 平 有 限 , 书 中 难免 有 不 足 之 处 ,希望 广大 读者 批评 指正 ,并 提出 宝贵 的 意 
见 和 建议 。( 编 者 邮箱 ; 282161073@qq. com) 


编 者 
2015 年 1 月 
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任务 1 ' 杀 当 网 上 书店 ”项目 需求 分 析 


叮当 书店 是 如 阳 市 的 一 家 中 小 型 连锁 书店 ,有 很 多 优质 图 书 资 源 和 教育 市 场 , 各 连锁 
网 点 遍布 当地 高 等 院 校 . 中 小 学 学 校 周边 。 因 其 图 书 更 新 速度 快 . 折 扣 较 低 、 服 务 快速 优 
质 ,叮当 书店 在 性 阳 市 当地 市 场 的 图 书 销售 业绩 和 客户 服务 都 很 出 色 。 

从 现在 开始 ,在 Paul( 保 罗 ) 的 带领 下 ,我 们 将 用 5 个 月 的 时 间 , 和 主人 公 Johm( 约 翰 ) 
-起 ,为 叮当 连锁 书店 开发 新 的 Web 应 用 系统 一 一 “叮当 网 上 书店 ”。 

作为 项 目 组 IFTC( 展 望 软件 研发 中 心 ) 的 成 员 之 一 ,Bill( 比 尔 ) 作 为 Web 前 端 开发 工 
程 师 亲自 参与 这 个 过 程 ,帮助 项 目 组 开发 设计 项 目的 整个 DEMO, 俗 称 “ 静 态 网 页 制作 ”。 
现在 由 Bill( 比 尔 ) 通 过 自己 的 项 目 开发 经 验 ,带领 大 家 一 起 体验 来 自 于 “叮当 网 上 书店 ” 
项 目 开 发 中 Web 前 端 工 程 师 的 酸甜苦辣 ,让 读者 完成 从 初学 者 到 Web 前 端 工程 师 的 虹 
变 之 旅 。 

4 学 习 目 标 

(1) 理解 什么 是 Web 标准 。 

(2) 了 解 Web 标准 的 历史 及 构成 。 

(3) 理解 网 站 开发 设计 的 项 目 需求 分 析 流 程 。 

(4) 理解 网 站 开发 设计 的 页 面 需求 分 析 。 

(5) 理解 网 站 开发 设计 的 功能 需求 分 析 。 
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许多 学 校 的 老师 ,学生 都 非常 喜欢 到 叮当 书店 连锁 书店 购书 。 遗 憾 的 是 ,对 于 叮当 书 
店 而 言 ,核心 主 顾 只 是 书店 周边 的 老师 和 学 生 , 其 他 人 则 难以 体验 到 叮当 书店 的 特色 。 因 
为 叮当 书店 只 有 传统 的 两 种 销售 渠道 : 各 连锁 书店 直接 销售 、 电 话 预订 销售 (支持 连锁 书 
店 取 货 、 送 货 上 门 两 种 配送 方式 )。 

2009 年 以 前 ,在 一 些 媒 体 和 客户 的 口碑 传导 下 ,叮当 书店 的 销售 业务 量 飞 速 增长 。 
但 是 , 自 2010 年 年 初 开 始 , 随 着 淘宝 、 当 当 网 .ChinaPub 等 知名 电子 商务 平台 的 迅速 发 
展 ,更 丰富 的 图 书 、 更 便捷 的 采购 、 更 低 的 折扣 等 都 让 叮当 书店 感受 到 了 巨大 的 销售 压力 。 
而 叮当 书店 传统 的 销售 渠道 ,也 已 经 无 法 满足 顾客 们 对 于 更 高 服务 质量 的 期 望 。 顾 客 们 
经 常 向 总 店 客服 投诉 说 无 法 及 时 从 连锁 书店 取 到 预订 的 图 书 , 配 送 员 也 在 各 连锁 书店 和 
客户 之 间 疲 于 奔 命 …… 很 显然 ,叮当 书店 迫切 需要 适应 市 场 需求 ,扩充 他 们 的 销售 渠道 ， 
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提高 服务 质量 。 

幸运 的 是 ,叮当 书店 拥有 一 位 出 色 的 销售 经 理 Andy( 安 迪 ) ,他 与 连锁 书店 周边 学 校 
的 许多 老师 .学 生 都 有 着 很 好 的 私人 关系 。Andy 正 全 力 以 赴 应 对 即将 到 来 的 9 月 销售 
旺季 一 一 新 学 期 开始 ,都 是 各 类 图 书 最 热 销 的 季节 。 

Andy 迅速 召开 了 几 次 内 部 会 议 ,最 终 证 实 ,如 果 仅 仅 依赖 目前 的 销售 渠道 ,要 提高 
销售 业务 和 服务 质量 太 难 了 。Andy 期 望 定制 开发 一 套 比较 完善 的 电子 商务 平台 一 一 叮 
当 网 上 书店 系统 。 这 套 网 上 书店 系统 要 能 结合 叮当 书店 连锁 书店 自身 网 店 分 布 广 的 优 
势 ,面向 特定 的 顾客 群体 ,拓展 网 上 图 书 销售 渠道 。 这 意味 着 新 的 电子 商务 解决 方案 要 在 
当年 7 月 1 日 之 前 上 线 测试 并 投入 运行 ,而 离 这 个 时 间 只 有 短 短 的 5 个 月 不 到 了 。Andy 
对 此 一 窍 不 通 , 根 本 不 知道 如 何在 这 么 短 的 时 间 内 使 网 上 书店 系统 上 线 和 运行 。 几 经 岩 
酌 后 ,Andy 联系 到 了 当地 一 家 具有 电子 商务 行业 开发 经 验 的 软件 研发 机 构 一 一 IFTC( 展 
望 软件 研发 中 心 )。Andy 将 这 个 项 目的 研发 工作 交 给 了 IFTC。 

Paul 是 IFTC 的 主要 负责 人 ,具有 非常 丰富 的 电子 商务 平台 研发 经 验 。Paul 决定 承 
接 叮当 书店 的 “网 上 书店 ”项目 。 为 尽 可 能 准确 地 了 解 叮 当 书店 的 需求 , Paul 做 了 充分 
的 准备 工作 ,他 给 Andy 打 电 话 , 约 了 第 二 天 中 午 到 IFTC 的 茶座 “ 曼 茶馆 ” 细 聊 。 

经 过 几 次 当面 .QQ、 电 话 等 的 沟通 和 交流 后 , “叮当 网 上 书店 ”项 目 正式 开始 实施 。 
Bill 作为 项 目 组 成 员 之 一 ,一 直 参 与 了 整个 项 目的 需求 分 析 , 多 次 跟 客户 进行 交流 ,按照 
客户 制定 的 参考 项 目 “ 当 当 网 上 书店 ”的 页 面 设计 效果 和 功能 进行 开发 设计 叮当 网 上 书店 
的 DEMO, 并 形成 网 站 开发 设计 需求 分 析 报 告 给 客户 进行 确认 。 
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要 做 好 网 站 开发 设计 需求 分 析 报 告 ,需要 了 解 相关 Web 开发 的 知识 及 标准 ,以 及 需 
求 分 析 报 告 的 相关 要 求 及 内 容 。 


1.2.1 什么 是 Web 标准 


Web 标准 是 由 W3C(World Wide Web Consortium) 和 其 他 标准 化 组 织 制定 的 一 套 
规范 集合 ,包含 一 系列 标准 ,自然 也 包含 了 我 们 所 熟悉 的 HTML、XHTML、JavaScript 以 
及 CSS 等 。Web 标准 的 目的 在 于 创建 一 个 统一 的 用 于 Web 表现 层 的 技术 标准 ,以 便 通 
过 不 同 浏览 器 或 终端 设备 向 最 终 用 户 展示 信息 内 容 。 

相关 链接 

W3C(World Wide Web Consortium) 中 文 译名 为 万 维 网 联盟 , 它 是 一 个 非 营 利 性 组 
织 ,主要 工作 是 制订 适用 于 网 络 的 技术 标准 。W3C 不 断 地 考察 互联 网 应 用 情况 ,根据 互 
联网 的 发 展 及 一 些 技术 的 逐步 应 用 ,将 某 些 技术 制定 为 国际 统一 的 标准 。 比 如 HTML、 
CSS 以 及 最 近 比 较 热 门 的 XML、RDF 等 都 由 W3C 负责 制订 。 除 了 制订 标准 外 ,W3C 还 
提供 标准 方面 的 资讯 、 标 准 的 版 本 更 新 、 辅 助 代码 验证 工具 等 服务 ,可 以 通过 http:// 
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www, w3c. org 了 解 有 关 方 面 的 最 新 消息 。 


1.2.2 ”Web 标准 的 历史 


提 到 Web 标准 的 历史 ,不 得 不 谈 及 一 个 经 典 的 名 词 一 一 HTML(HyperText Mark- 
up Language, 超 文本 置 标语 言 )。 事 实 上 ,HTML 技术 是 目前 最 优秀 也 是 最 为 核心 的 
Web 技术 之 一 。 目 前 计算 机 上 (包括 互联 网 在 内 ) 的 大 部 分 应 用 程序 在 交互 操作 上 的 核 
心 原理 都 来 自 于 HTML 的 链接 设计 思想 。 

超 文本 式 浏览 从 根本 上 改变 了 人 们 的 阅读 习惯 ,这 种 非 线 性 的 阅读 方式 ,可 以 灵活 地 
组 织 多 种 信息 的 内 容 。 用 户 不 再 为 从 上 至 下 的 段落 阅读 方式 所 束缚 ,可 以 根据 全 文 的 内 
容 随 时 通过 某 个 关键 字 上 的 链接 去 查看 相关 的 注释 或 者 其 他 信息 。 更 重要 的 是 ,由 于 这 
种 链接 式 文本 的 出 现 ,使 得 传统 信息 可 以 进行 更 合理 的 分 类 与 检索 ,从 而 改变 了 信息 的 展 
现 方式 。 

目前 互联 网 上 的 优秀 网 站 无 一 不 是 通过 对 信息 进行 合理 的 分 析 、 分 类 与 处 理 来 创造 
商业 价值 的 ,比如 Google、Amazon、eBay 等 ,它们 通过 信息 的 超 文 本 式 整 理 与 业务 模式 来 
进行 整合 ,使 得 全 新 的 商业 模式 带 给 用 户 与 企业 客观 的 价值 。 目 前 HTML 也 是 最 为 普 
及 的 网 页 设计 技术 ,不 同 的 操作 系统 或 者 浏览 器 都 可 以 通过 HTML 进行 信息 的 设计 、 整 
合 。HTML 4.0 版 本 已 经 是 一 种 非常 成 熟 的 页 面 描述 脚本 语言 , 它 支持 .提供 (包含 段 
落 列表、 表格 等 ) 众 多 标签 元 素来 对 信息 进行 组 织 ,并且 有 具备 一 定 的 设计 功能 ,比如 能 对 
版 式 .字体 颜色 及 图 片 等 信息 做 出 控制 , 它 是 目前 最 普及 的 网 页 设计 技术 。 

然而 仅仅 依靠 一 种 文本 技术 来 进行 网 页 表现 还 是 远 远 不 够 的 ,W3C 通过 长 期 的 技术 
制订 , 另 一 种 用 于 文本 设计 的 技术 诞生 了 ,这 就 是 CSS(Cascading Style Language, 层 释 
样式 表 ) 。 

在 CSS 技术 初期 ,由 于 它 的 出 现 晚 于 浏览 器 的 推出 , 没 能 被 当时 的 浏览 器 所 支持 ,所 
以 一 直 未 能 得 到 普及 。 直 到 CSS 2.0 版 本 出 现 , 它 才 被 广大 网 页 设计 师 所 接受 。 如 果 你 
在 1999 一 2000 年 期 间 开 始 了 解 网 页 制作 技术 的 话 ,应 该 能 够 体会 到 ,当时 通过 CSS 来 定 
义 全 站 的 字体 颜色 和 链接 样式 的 方法 ,已 经 能 够 让 当时 的 网 站 设计 工作 变 得 高 效 、 灵 活 。 

随 着 网 络 技术 的 发 展 与 用 户 需求 提高 ,单纯 的 信息 展示 已 经 不 能 满足 大 家 对 获取 信 
息 的 需求 。 拥 有 交互 性 也 是 Web 发 展 的 标志 之 一 ,JavaScript 的 诞生 正 是 为 了 处 理 日 益 
增长 的 对 页 面 交互 的 需求 ,使 得 用 户 能 通过 鼠标 或 者 键盘 操作 来 对 页 面 上 的 信息 进行 交 
互 行为 , 像 增加 、 改 变 或 者 删除 信息 以 及 更 为 丰富 的 交互 方式 。 

时 至 今日 ,Web 标准 已 经 是 由 一 系列 架构 分 明 的 技术 组 成 ,这 些 技术 都 已 成 为 目前 
Web 表现 层 技术 的 头号 应 用 。 


1.2.3 Web 标准 的 构成 


Web 标准 由 一 系列 规范 组 成 ,由 于 Web 设计 越 来 越 趋 向 整体 与 结构 化 ,目前 的 Web 
标准 也 逐步 变 为 由 三 大 部 分 组 成 的 标准 集 : 结构 (Structure) .表现 (Presentation) 和 行为 
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(Behavior) ,如 图 1-1 所 示 。 


前 端 Front-End 


1-1 Web 标准 三 大 部 分 


1. 结构 (Structure) 


结构 用 来 对 网 页 中 用 到 的 信息 进行 整理 与 分 类 。 用 于 结构 化 设计 的 Web 标准 技术 
主要 有 这 样 几 种 : HTML、XML (eXtensible Mark-up Language, 可 扩展 置 标语 言 )、 
XHTML(eXtensible HTML, 可 扩展 HTML)。 

(1) HTML 

HTML 是 Web 最 基本 的 描述 语言 ,设计 HTML 语言 的 目的 是 把 存放 在 这 台 计算 机 
中 的 文本 及 图 形 与 另 一 台 计 算 机 中 的 文本 及 图 形 方便 地 联系 在 一 起 ,形成 有 机 的 整体 ,这 
样 人 们 不 用 考虑 具体 信息 是 存放 在 当前 计算 机 中 还 是 在 网 络 上 的 其 他 计算 机 中 。 你 只 要 
使 用 鼠标 在 某 一 页 面 中 单 击 一 个 图 标 ,Internet 就 会 马上 转 到 与 此 图 标 相关 的 内 容 , 而 这 
些 信 息 可 能 存放 在 网 络 中 的 另 一 台 计 算 机 里 。 

HTML 文本 是 由 HTML 标签 组 成 的 描述 性 文本 。HTML 标签 可 以 说 明文 字 、 图 
形 动画 声音、 表格 . 超 链 接 等 。HTML 的 结构 包括 头 部 (Head) .主体 (Body) 两 大 部 分 。 
头 部 描述 浏览 器 所 需 的 信息 ,主题 包括 所 要 展现 的 具体 内 容 。 

(2) XML 

XML 是 一 种 能 定义 其 他 语言 的 语言 , 即 可 扩展 置 标语 言 。XML 最 初 设 计 的 目的 是 
弥补 HTML 的 不 足 , 以 其 强大 的 扩展 性 满足 网 络 信息 发 布 的 需要 ,后 来 逐渐 用 于 网 络 数 
据 的 转换 及 描述 。 

(3) XHTML 

虽然 XML 的 数据 转换 能 力 强 大 ,完全 可 以 替代 HTML ,但 面 对 成 千 上 万 的 Internet 
站 点 ,直接 采用 XML 还 为 时 过 早 。 因 此 ,人 们 在 HTML 的 基础 上 ,用 XML 的 规则 对 其 
进行 扩展 ,得 到 了 XHTML。 简单 来 说 ,建立 XHTML 的 目的 就 是 实现 HTML 向 XML 
的 过 渡 。 


2. 表现 (Presentation) 


表现 技术 用 于 对 已 经 被 结构 化 的 信息 进行 显示 上 的 控制 ,包括 版 式 、 颜 色 、 大 小 等 样 
式 控制 。 目 前 的 Web 展示 中 ,用 于 表现 的 Web 标准 技术 主要 就 是 CSS 技术 。 

W3C 创建 CSS 标准 的 目的 是 希望 以 CSS 来 描述 整个 页 面 的 布局 设计 ,与 HTML 所 
负责 的 结构 分 开 。 使 用 CSS 布局 与 XHTML 所 描述 的 信息 结构 相 结 合 ,能 够 帮助 设计 师 
分 离 出 表现 与 内 容 , 使 站 点 的 构建 及 维护 更 加 容易 。 
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任务 1 “叮当 网 上 书店 ”项 目 需 求 分 析 


3. 行为 (Behavior) 


行为 是 指 对 整个 文档 内 部 的 一 个 模型 进行 定义 及 交互 行为 的 编写 ,用 于 编写 用 户 可 
以 进行 交互 式 操作 的 文档 。 表 现行 为 的 Web 标准 技术 主要 如 下 。 

(1) DOM(Document Object Model ,文档 对 象 模型 ) 

根据 W3C DOM 规范 ,DOM 是 一 种 让 浏览 器 与 Web 内 容 结 构 之 间 沟 通 接口 ,使 用 
户 可 以 访问 页 面 上 的 标准 组 件 。DOM 给 予 Web 设计 师 和 开发 者 一 个 标准 的 方法 ,让 他 
们 来 访问 站 点 中 的 数据 .脚本 和 表现 层 对 象 。 

(2) ECMAScript 脚本 语言 

ECMAScript 脚本 语言 是 由 CMA(Computer Manufacturers Association) 制 订 的 一 
种 标准 脚本 语言 (JavaScript) ,用 于 实现 具体 界面 上 对 象 的 交互 操作 。 


1.2.4 网 站 项 目 需 求 分 析 的 流程 


一 个 网 站 项 目的 确立 是 建立 在 各 种 各 样 的 需求 上 面 的 ,这 种 需求 往往 来 自 客户 的 实 
际 需求 或 者 是 出 于 公司 自身 发 展 的 需要 ,其 中 客户 的 实际 需求 也 就 是 说 这 种 交易 性 质 的 
需求 占 了 绝 大 部 分 。 面 对 网 站 开发 拥有 不 同 知识 层面 的 客户 ,项 目的 负责 人 对 用 户 需 求 
的 理解 程度 ,在 很 大 程度 上 决定 了 此 类 网 站 开发 项 目的 成 败 。 因 此 如 何 更 好 地 了 解 、 分 
析 、 明 确 用 户 需求 ,并 且 能 够 准确 .清晰 地 以 文档 的 形式 表达 给 参与 项 目 开发 的 每 个 成 员 ， 
保证 开发 过 程 按照 满足 用 户 需 求 为 目的 正确 项 目 开 发 方向 进行 ,是 每 个 网 站 开发 项 目 管 
理 者 需要 面 对 的 问题 。 

本 书 就 目前 网 站 开发 行业 的 需求 分 析 文 档 为 读者 来 进行 讲解 。 整 个 需求 分 析 阶 段 的 
流程 如 图 1-2 所 示 。 

通过 对 这 个 流程 的 分 析 , 建 议 专 业 的 网 站 需求 分 析 中 应 该 包括 以 下 几 大 部 分 。 

(1) 网 站 框架 图 或 网 站 地 图 的 规划 。 使 用 专业 的 流程 图 绘制 工具 绘画 出 网 站 的 框架 
图 ,让 网 站 中 各 个 页 面 . 导航、 栏目 ,版块 都 能 够 清晰 地 展现 在 图 中 ,作为 网 站 需求 分 析 的 
总 览 图 。 

(2) 页 面 设计 的 需求 总 结 。 在 网 站 需求 分 析 中 总 结 出 哪些 页 面 需要 独立 设计 、 页 面 
的 风格 色彩 是 什么 、 页 面 分 辩 率 是 多 少 、 是 否 有 VI 图 标的 设计 以 及 数量 、 是 否 有 动画 设 
计 以 及 数量 、 是 否 有 JavaScript 前 端 效 果 以 及 数量 等 。 这 些 都 会 影响 项 目的 工期 进度 以 
及 成 本 。 

(3) 网 站 功能 需求 总 结 。 根 据 客户 需要 以 及 网 站 内 容 管 理 的 全 面 性 进行 功能 的 总 
结 ,在 网 站 需求 分 析 中 ,一 定 要 讲 每 个 功能 的 细节 操作 定义 清晰 ,以 免 在 后 期 开发 中 出 现 
歧义 。 例 如 本 项 目 中 用 户 模块 ,包括 “用 户 注册 ”“ 用 户 登录 “用 户 个 人 信息 维护 “用 
户 注销 ”“ 用 户 修改 密码 ”等 。 

(4) 技术 说 明 。 在 网 站 需求 分 析 中 应 体现 出 使 用 的 是 哪 种 技术 平台 、 哪 种 设计 软件 ， 
网 站 前 端 技术 有 哪些 .安全 防御 措施 有 哪些 等 。 
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双向 沟通 | “| 提交 项 目 功 | ,| 洽谈 细节 ， 制 订 | 
项 目 需求 能 分 析 报 告 开发 方案 、 预 算 NE 
[只 上 外 人 

{ 1 1 
Ene 

| 过 上 基数 上 wa 


® 9 

Se 
Ee 上 | rk 一 三 | 
F 仿 网 站 文 | 。「 疝 站 维护 | [网 站 推广 咨询 
件 到 服务 器 ”| 售后 服务 | 其 他 增值 服务 


图 1-2 网 站 开发 需求 分 析 阶 段 流 程 图 


(5) 关于 网 站 优化 的 分 析 。 实 际 上 网 站 的 作用 主要 是 带 来 流量 和 客户 源 ,因此 在 网 
站 需求 分 析 中 要 重视 对 网 站 优化 推广 的 策划 ,分析 网 站 的 客户 群 习惯 搜索 哪些 关键 词 去 
找 他 们 需要 的 信息 或 产品 ,然后 根据 这 些 关 键 词 对 网 站 进行 优化 。 

(6) 网 站 报价 。 当 然 , 如 果 是 自己 公司 的 网 站 ,就 不 必 有 这 一 步 了 。 如 果 是 建站 公司 
对 外 服务 ,那么 应 将 每 项 服务 或 功能 的 报价 细节 罗列 在 网 站 需求 分 析 文 档 中 。 

(7) 项 目 实施 安排 。 明 确 说 明 项 目的 实施 步骤 以 及 项 目 工期 和 人 员 配备 的 安排 。 

(8) 售后 服务 。 也 可 以 称 为 后 期 网 站 维护 ,在 网 站 需求 分 析 中 应 对 网 站 后 期 的 内 容 
维护 .定期 改版 ,数据 备份 等 工作 给 出 安排 说 明 。 

按照 以 上 几 条 进行 网 站 需求 分 析 并 将 结果 撰写 成 文档 ,会 对 网 站 建设 工作 具有 重要 
作用 。 根 据 网 站 类 型 和 规模 的 不 同 ,还 可 以 将 一 些 特殊 的 需求 加 入 到 网 站 需求 分 析 文 档 
中 ,以 保证 建站 效果 。 
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1.3.1 页 面 级 设计 需求 


Bill 通过 前 期 的 需求 分 析 和 客户 指定 的 参考 项 目 , 对 “叮当 网 上 书店 ”项 目的 网 站 设 
计 方 面 做 了 大 量 的 分 析 , 并 制订 了 本 项 目的 相关 需求 分 析 总 结 。 


任务 1 “叮当 网 上 书店 ”项 目 需求 分 析 


1. 定义 系统 用 户 


叮当 网 上 书店 系统 的 用 户主 要 分 为 以 下 3 种 。 

(1) 匿名 用 户 , 即 未 在 网 上 书店 注册 的 顾客 。 

(2) 会 员 , 即 在 网 上 书店 注册 , 且 账 号 状态 为 “正常 ”的 顾客 。 
(3) 书店 管理 员 , 即 叮当 网 上 书店 的 销售 专员 ,如 Andy。 


2. 页 面 整 体 配 色 方案 


根据 客户 Andy 制订 的 参考 项 目 ,本 项 目的 整体 配色 以 橘 黄 为 主 , 背 景色 以 白色 为 
主 , 字 体 以 黑色 为 主 ,模块 背景 色 以 橘 黄 的 渐变 色 为 主 ,表单 及 表单 元 素 的 配色 应 符合 整 
体 色 设 计 , 尽 量 避 免 色差 很 大 或 者 颜色 跳跃 为 原则 。 


3. 页 面 数 及 分 辨 率 


根据 本 项 目的 功能 模块 及 业务 逻辑 需求 ,本 项 目 总 共 需 要 设计 首页 、 图 书 分 类 页 ,图 
书 详细 页 ,用户 注册 页 ,用户 登录 页 .图书 分 类 检索 页 购物 车 页 .平台 帮助 页 8 个 页 面 。 
每 个 页 面 采用 1024X768 像素 以 上 分 辩 率 。 页 面 设计 采用 固定 宽度 且 居 中 版 式 。 


4. 页 面 浏览 器 支持 


项 目 中 所 有 页 面 都 要 支持 在 IE 6. 0、IE 7.0、IE 8.0、IE 9.0、Mozilla Firefox Google 
Chrome、 搜 狗 .世界 之 窗 等 主流 浏览 器 上 的 显示 统一 。 由 于 每 种 浏览 器 对 CSS 2. 0 的 兼 
容 与 解析 Bug 的 问题 ,因此 ,同样 的 样式 可 能 会 在 不 同 的 浏览 器 中 产生 的 效果 不 同 ,所 
以 ,需要 开发 者 对 CSS Hack 技术 有 所 了 解 和 掌握 。 本 书 也 会 对 项 目 开 发 中 的 一 些 常见 
的 CSS Hack 问题 作 详尽 的 讲解 和 剖析 。 


5. 页 面 广告 及 VI 图标 设计 

根据 客户 Andy 的 需求 “叮当 网 上 书店 ”的 Logo 需要 设计 制作 ,总 体 要 求 能 够 符合 
公司 宣传 需求 ,美观 大 方 ,符合 版 面 设计 要 求 。 对 于 广告 位 的 设计 ,要 在 网 站 前 台 页 面 的 
底部 设计 一 个 982X 80 像素 的 长 幅 图 片 广告 位 ,主要 为 客户 进行 网 络 推广 。 

6. 页 面 交 互 设计 


页 面 交互 性 能 是 提高 网 站 使 用 用 户 体验 度 的 体现 ,目前 实现 页 面 交互 的 技术 比较 多 ， 
比如 DOM ,JavaScript 等 。 本 项 目 网 站 中 ,准备 采用 目前 比较 流行 的 Ajax\jQuery 等 技术 ， 
实现 网 站 首页 搜索 提示 ,用户 登录 页 面 \ 用 户 注册 页 面 、 购 物 车 页 面 等 相关 的 交互 功能 。 


7. 页 面 技术 方案 


Bill 是 Web 前 端 工程 师 ,主要 为 “叮当 网 上 书店 整个 电子 商务 平台 提供 前 端 技术 支 
持 和 保障 。 由 于 本 项 目 电 商 平台 的 技术 平台 为 ASP. NET、SQL Server、Windows 操作 系 
统 , 因 此 ,在 网 站 设计 制作 中 ,Bill 准备 采用 由 W3C 提供 的 Web 开发 标准 技术 来 实现 ,其 
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中 包括 XHTML CSS jQuery、Ajax 等 。 
8. 网 站 页 面 搜索 优化 


作为 一 个 电 商 平台 ,能 够 在 网 络 上 快速 .精确 地 进行 搜索 ,能 够 为 企业 带 来 巨大 的 用 
户 量 和 经 济 价 值 。 因 此 ,在 网 站 开发 设计 阶段 给 客户 进行 搜索 优化 设计 是 一 个 非常 重要 
的 工作 ,这 里 面包 括 对 网 站 关键 词 的 设计 、 页 面 代码 优 化 等 。 需 要 网 站 设计 开发 者 在 开发 
制作 过 程 中 具有 良好 的 编码 习惯 页 面 与 样式 分 离 等 能 力 。 

关于 网 站 开发 流程 中 的 网 站 报价 、 域 名 注册 、 服 务 器 主机 、 项 目 实施 安排 .后 期 维护 与 
支持 工作 ,这 些 在 本 项 目 中 ,由 项 目 负 责 人 Paul 具体 实施 。 但 是 ,即使 作为 一 个 纯 静 态 的 
网 站 开发 项 目 ,这 些 环节 也 是 必 不 可 少 的 。 


1.3.2 网 站 功能 级 的 需求 


网 站 功能 级 的 需求 主要 是 指 对 网 站 整个 业务 流程 和 每 个 页 面 的 功能 模块 的 划分 。 用 
相应 的 工具 软件 ,描述 出 各 页 面 的 功能 模块 图 ,以 便 跟 客户 交流 时 ,能 够 快速 高 效 地 进行 
需求 分 析 和 沟通 交流 。 


Bill 按照 跟 客户 Andy 的 交流 沟通 结果 ,对 “叮当 网 上 书店 ”的 整体 功能 图 、 各 页 面 功 
能 模块 图 进行 了 绘制 与 阐述 。 


1. 网 站 整体 功能 图 
网 站 整体 功能 图 如 图 1-3 所 示 。 


叮当 网 上 书店 


1 ! 1 1 | 
首 图 图 用 用 分 购 FE 
页 书 书 户 到 类 物 台 
分 详 注 登 检 车 帮 
类 细 册 录 索 页 助 
页 页 页 页 页 页 


1-3 “叮当 网 上 书店 ”功能 图 


2. 首页 功能 模块 图 
首页 功能 模块 图 如 图 1-4 所 示 。 
3. 图 书 分 类 页 


本 页 面 主要 对 图 书 进行 分 类 列表 展示 ,进行 分 页 、 排 序 ( 上 架 时 间 、 价 格 、 销 售 记录 
等 ) ,并 提供 图 书 购买 .收藏 功能 。 其 他 Logo 及 导航 菜单 模块 ,快速 分 类 检索 模块 图书 


分 类 模块 品牌 出 版 社 模块 、 广 告 位 展示 模块 等 的 布局 与 设计 雷同 首页 。 图 书 分 类 检索 页 
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[一 一 | Logo 及 导航 菜单 模块 


[一 一 | 快速 分 类 检索 模块 


六 一 一 | 图 书 分 类 模块 


广 一 一 | 品牌 出 版 社 排行 模块 


[一 一 | 图 书 点 击 排行 Top10 模 块 


[一 一 | 主编 推荐 图 书 模块 


荣 落 融 呈 当下 


[一 一 | 本 月 最 新 图 书 模块 


[一 一 | 本 周 热 销 图 书 模块 


[一 ”| 用 户 快速 登录 、 注 册 模 块 


一 人 | 广告 位 展示 模块 


1-4 首页 功能 模块 图 
的 设计 基本 与 图 书 分 类 页 设计 一 致 。 
4. 图 书 详细 页 


本 页 面 主 要 是 对 单 本 图 书 进行 详细 展示 ,包括 图 书 的 封面 图 片 、 书 名 、 作 者 、 出 版 社 、 
出 版 时 间 、ISBN ,原价 \ 折 扣 、 折 扣 价 、 库 存 、 简 要 说 明 、 详 细 说 明 等 信息 。 本 页 面 也 提供 图 
书 购 买 收藏 功能 。 其 他 Logo 及 导航 菜单 模块 快速 分 类 检索 模块 、 图 书 分 类 模块 .品牌 
出 版 社 模块 .广告 位 展示 模块 等 的 布局 与 设计 与 首页 相似 。 


5. 用 户 注 册页 


本 页 面 主 要 提供 为 顾客 (匿名 用 户 ) 进 行 会 员 注册 功能 ,用 户 注 册 需 提供 E-mail 账 
号 昵称、 密码 及 确认 密码 等 信息 。 对 用 户 提供 的 E-mail 账号 进行 Ajax 的 检测 ,确保 
E-mail 账号 在 数据 库 记录 中 的 唯一 性 。 对 所 有 表单 元 素 进行 jQuery 的 客户 端 验 证 。 其 
他 Logo 及 导航 菜单 模块 ,广告 位 展示 模块 等 布局 与 设计 首页 相似 。 


6. 用 户 登录 页 


本 页 面 主要 为 会 员 用 户 提供 一 个 网 购 登 录 功 能 ,登录 时 ,会 员 需 要 提供 E-mail 账号 、 
密码 信息 。 本 页 面 还 要 为 会 员 提供 找 回 密码 功能 和 快速 注册 链接 功能 。 其 他 Logo 及 导 
航 菜单 模块 广告 展示 模块 等 布局 与 设计 首页 相似 。 


7. 购物 车 页 


本 页 面 主要 为 登录 会 员 提供 在 选 购 图 书 之 后 ,结算 订单 之 前 ,对 图 书 数量 .单价 和 总 
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价 等 进行 列表 统计 功能 ,包括 对 购物 车 中 图 书 的 删除 .图 书 数量 的 编辑 .订单 总 价 的 自动 
统计 、 继 续 购物 链接 功能 、 结 算 等 。 其 他 Logo 及 导航 菜单 模块 .广告 位 模块 等 布局 与 设 
计 首 页 相似 。 


8. 平台 帮助 页 


本 页 面 主要 为 本 电子 商务 平台 的 客户 提供 初学 者 使 用 教程 ,主要 将 平台 各 页 面 的 使 
用 规范 和 操作 功能 进行 描述 和 展示 ,能 够 让 初次 使 用 者 快速 熟练 使 用 本 平台 。 其 他 Logo 
及 导航 菜单 模块 ,广告 位 模块 等 布局 与 设计 首页 相似 。 

Bill 根据 多 年 的 网 站 设计 与 开发 项 目 需求 分 析 经 验 ,总结 出 了 网 站 功能 级 需求 的 重 
要 性 和 必要 性 。 网 站 功能 级 需求 做 的 越 详细 越 细致 ,对 后 期 的 开发 就 越 有 利 , 越 能 让 项 目 
开发 做 到 精细 化 ,尽量 避免 跟 客 户 之 间 因 为 项 目 功能 产生 一 些 不 必要 的 麻烦 。 


14 任务 拓展 


经 过 任务 1 的 学 习 , 读 者 大 致 了 解 了 网 站 项 目 设计 与 开发 的 需求 分 析 流 程 和 各 个 流 
程 环节 中 应 该 做 的 具体 工作 。 读 者 可 以 按照 本 任务 的 一 些 具体 内 容 和 标准 ,参照 行业 内 
网 站 设计 与 开发 项 目的 需求 分 析 报 告 格式 ,自己 动手 完成 一 份 “叮当 网 上 书店 "电子 商务 
平台 项 目的 需求 分 析 报 告 ,为 自己 以 后 的 职业 生涯 技 打下 一 定 的 基础 并 积累 一 定 的 经 验 。 


15 任务 小 结 


本 任务 主要 为 读者 讲解 和 阐述 作为 项 目 组 重要 成 员 之 一 的 Bill 的 一 些 关 于 网 站 项 目 
设计 与 开发 的 需求 分 析 的 流程 和 各 流程 应 该 做 哪些 工作 等 ,并 从 页 面 级 和 功能 级 两 个 方 
面 进 行 了 详尽 的 阐述 ,让 读者 能 够 通过 本 任务 的 学 习 , 初 步 了 解 Web 标准 的 相关 知识 以 
及 网 站 项 目 设计 与 开发 的 需求 分 析 应 该 怎么 做 ,做 什么 ; 也 能 够 独立 完成 第 一 份 网 站 项 
目 设计 与 开发 的 需求 分 析 报 告 ,为 接 下 来 的 工作 打下 一 个 坚实 的 基础 。 


16 能 力 评 估 


. 什么 是 Web 标准 ? 

.Web 标准 有 哪 三 大 部 分 ? 每 部 分 的 技术 标准 有 哪些 ? 
. 网 站 项 目 设计 与 开发 的 需求 分 析 流 程 有 哪些 ? 

. 页 面 设计 需求 需要 做 哪些 方面 ? 

. 网 站 功能 需求 需要 做 哪些 方面 ? 


an 上 性 


任务 2 “ 钉 当 网 上 书店 ”前台 版 面 设计 稿 


通过 任务 1 的 “叮当 网 上 书店 ”首页 网 站 项 目 需求 分 析 , Bill 基本 明确 了 用 户 需 求 和 
网 站 的 功能 模块 。 根 据 网 站 整体 功能 图 ,网 站 主要 可 以 包含 首页 、 图 书 分 类 页 ,图 书 分 类 
页 .图书 详细 页 .用 户 注 册页 .用 户 登 录 页 ,分 类 检索 页 .购物 车 页 .平台 帮助 页 八大 功能 模 
块 。 首 先 ,根据 需求 ,Bill 给 出 初步 版 面 设计 稿 ,并 与 客户 沟通 后 修整 ,确定 各 版 面 的 设计 
最 终 稿 , 以 确立 网 站 页 面 框架 结构 。 

人 学习 目标 

(1) 理解 常用 的 网 站 布局 格式 。 

(2) 理解 根据 网 站 功能 级 的 需求 ,完成 各 版 面 设 计 稿 。 


21 任务 描述 


Bill 通过 “叮当 网 上 书店 ?首页 网 站 项 目 需求 分 析 和 客户 指定 的 参考 项 目 , 确 立 了 网 
站 整体 功能 ,绘制 出 网 站 整体 功能 图 和 各 功能 模块 图 。 在 这 个 阶段 ,Bill 要 将 功能 图 实现 
为 各 页 版 面 设计 图 ,安排 各 页 面 的 版 式 ,然后 根据 客户 反馈 调整 ,直到 确定 各 版 面 的 设计 
最 终 稿 。 


22 相关 知识 


2.2.1 网 站 常用 的 布局 结构 


本 任务 要 求 在 了 解 各 种 布局 形式 后 ,确定 各 网 页 整体 布局 方式 和 各 功能 模块 的 安排 
定位 。 网 页 布局 版 式 主要 按照 任务 1 中 客户 制订 的 “叮当 网 上 书店 ”的 页 面 设 计 效 果 和 功 
能 开发 .设计 “叮当 网 上 书店 ”的 DEMO。 

一 般 网 站 都 需要 实现 以 下 的 一 些 模块 : 网 站 名 称 与 Logo、 新 闻 、 广 告 、 主 菜单 .友情 
链接 、 版 权 、 计 数 器 ,搜索 和 邮件 列表 等 ,安排 这 些 模块 内 容 , 就 需要 对 网 站 进行 布局 ,确定 
一 种 网 站 结构 和 版 式 。 

在 采用 基于 DIV 十 CSS 的 布局 开发 时 ,经 常 需要 考虑 各 种 显示 器 的 分 辨 率 和 各 种 浏 


Web 前 端 开发 项 目 化 教程 
览 器 版 本 的 兼容 性 问题 。 网 站 的 视觉 路 径 一 般 是 从 上 到 下 ,从 左 到 右 。 常 用 的 布局 模式 
主要 包括 “ 左 中 右 *”“ 上 中 下 ”以 及 两 种 模式 的 结合 。 


2.2.2 网 站 常用 的 页 面 版 式 


网 站 的 版 式 可 分 为 以 下 几 种 。 
(1) 一 列 固定 宽度 。 这 种 布局 在 实际 应 用 中 一 般 用 于 网 站 大 框架 的 构造 ,比如 图 2-1 
所 示 的 网 站 就 采用 了 一 列 固 定 宽度 居中 布局 ,将 网 站 整体 锁定 在 浏览 器 窗口 的 正中 间 。 
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2-1 一 列 固 定 宽度 居中 布局 网 站 


(2) 一 列 宽度 自 适应 。 自 适应 布局 同样 是 网 页 设计 中 常见 的 布局 形式 之 一 , 它 能 根 
据 浏 览 器 窗口 的 大 小 ,自动 改变 其 宽度 或 高 度 值 。 这 是 一 种 非常 灵活 的 布局 形式 ,类 似 于 
框架 结构 中 的 设置 ,良好 的 自 适应 布局 网 站 对 不 同 分 辩 率 的 显示 器 都 能 提供 最 好 的 显示 
效果 。 

(3) 二 列 固 定 宽度 。 二 列 固定 宽度 在 页 面 设计 中 经 常会 用 到 ,作为 网 站 大 框架 的 构 
造 或 内 容 分 栏 ,都 可 适用 ,如 图 2-2 所 示 。 

(4) 二 列 宽度 自 适应 。 

(5) 二 列 右 列 宽度 自 适应 。 

(6) 二 列 固定 宽度 居中 。 

(7) 三 列 浮动 中 间 列 宽度 自 适应 ( 见 图 2-3)。 


任务 2 “叮当 网 上 书店 ”前 总 师 醒 愉 寺 称 | 
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图 2-2 二 列 固定 宽度 居中 布局 网 站 
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图 2-3 三 列 固定 宽度 居中 布局 网 站 


23 任务 实现 


2.3.1 “叮当 网 上 书店 ”首页 版 面 设计 稿 


根据 任务 1 中 给 出 的 首页 功能 模块 图 确定 页 面 中 各 部 分 的 内 容 后 , 接 下 来 需要 根据 
内 容 本 身 考 虑 整体 的 页 面 版 型 。“ 叮 当 网 上 书店 ”是 一 列 固 定 宽度 居中 的 版 式 ,在 这 里 也 
采用 这 样 的 版 式 来 安排 图 2-4 所 示 的 首页 功能 模块 图 中 的 各 个 模块 。 

“叮当 网 上 书店 ?首页 版 面 设计 稿 效果 如 图 2-5 和 图 2-6 所 示 ,分 为 头 部 主体 部 分 和 
底部 。 头 部 为 导航 栏 和 搜索 栏 ' 以 橘 黄 的 渐变 色 为 主 , 导 航 栏 从 左 到 右 分 别 是 Logo、 导 航 
按钮 .导航 文字 链接 。 底 部 的 上 、 下 分 为 图 片 广告 条 和 版 权 信息 、 工 商 编 号 。 主 体 部 分 安 
排 为 左 、 中 、 右 三 栏 显 示 , 左 侧 为 图 书 栏目 和 品牌 出 版 社 栏目 , 右 侧 为 用 户 登录 表单 栏目 和 
点 击 排行 榜 栏目 。 以 上 的 图 书 、 品 牌 出 版 社 和 点 击 排行 榜 3 个 栏目 都 用 橙色 圆 角 矩形 作 
为 标题 背景 ,以 列表 的 形式 来 显示 具体 内 容 。 中 间 部 分 分 为 上 、 中 、 下 三 块 ,从 上 至 下 分 别 
是 主编 推荐 栏目 、 本 月 新 版 栏目 和 本 周 热点 栏目 。 主 编 推荐 和 本 周 热点 栏目 都 以 左 侧 封 
16 
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一 Logo 及 导航 菜单 模块 

一 -| 快速 分 类 检索 模块 
— 图 书 分 类 模块 

首 一 -| 品牌 出 版 社 排行 模块 
功 图 书 点 击 排行 Top10 模 块 


能 
模 一 - 主编 推荐 图 书 模块 
块 
图 -| 本 月 最 新 图 书 模块 
一 -| 本 周 热 销 图 书 模块 
一 一 用 户 快速 登录 、 注 册 模块 
—| 广告 位 展示 模块 
图 2-4 首页 功能 模块 图 
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2-5 首页 版 面 设计 稿 
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面 图 片 、 右 侧 文字 简介 的 形式 显示 内 容 , 本 月 新 版 栏目 是 以 封面 图 片 配 以 书 名 价格 的 方式 
形成 四 列 两 行 的 列表 列 出 新 版 图 书 的 书目 。 


Logo 首页 | 我 的 叮当 | 图 书 分 类 风物 车 | 帮助 中 心 | 我 区 账户 | 新 用 户 注册 | 号 录 


图 书 分 类 ; 程序 设计 | Web 开发 | 数据 库 管 理 | *amx 入 门 学 习 | 热门 分 裂 : C# | ASP NET | SQL Sever | PHF ”其 地 分 类 : C# | ASP,NET | SQL Server 


叮当 国 节 请 六 入 称 要 可 汉 的 关键 河 搜索 训 要 | 和 机; 抽检 执 拥 2 热 所 3 执 扫 4 热天 执 按 5 执 按 1 
E 大 推荐 东 全 的 图 书 、 景 低 的 价格 尽 在 1 沁 同 4 请》 | [及 时 
亲近 Eee 地 址 更 称 : 
5 
简介 窗 码 : 
本 
人 RE 不是 当 同 用 户 ? 
他 于 一 个 训 用 户 》 
0 
守 符 4 。 折扣 价 :#36 。 折扣 : 15 折 
本 月 新 出 版 、 最 新 最 雪 图 书 全 收录 ， 最 佳 吕 后 、 最 忧 价格 4 Es» 
#8 3 3 3 
¥30-00 ¥28 00 0606 ¥28.00 时 56-00 ¥¥28.00 ¥30-00 ¥26.00 
#6 3 #8 8 > 
局 小 出 版 往 ¥39-00 ¥26.00 39-00 ¥28.00 ¥35-00 ¥28.00 ¥30-00 ¥28.00 
本 用 人 热点 是 的 图 书 ， 全 场 打折 、 天 天 特价 9 Ee 
书 和 
作者 : 
出 折 社 : 
出 且 时 间 : 


宏和 终 一 48 折扣 价 : 兰 38 。 折扣 : ?5 折 


媒体 评论 : 


Copyright © 当当 网 2004-2009, All Rights Reserved Fowered By GrestSoft Corp， 苏 ICPiF041189 号 


2-6 首页 版 面 设 计 稿 电子 版 
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任务 2 “叮当 网 上 书店 ”前 台 版 面 设计 稿 


2.3.2 “叮当 网 上 书店 ?登录 页 版 面 设计 稿 


登录 页 面 为 会 员 提 供 网 购 登录 的 功能 。 考 虑 到 网 站 风格 统一 的 问题 ,Logo 及 导航 菜 
单 模块 .快速 分 类 检索 模块 .图 书 分 类 模块 .广告 展示 模块 等 保持 布局 与 首页 相同 ,也 就 是 
头 部 和 底部 沿用 首页 的 设计 。 主 体 部 分 主要 提供 会 员 的 网 购 登录 功能 ,在 布局 上 分 为 上 、 
下 结构 。 上 部 给 出 “叮当 网 ,全球 领 先 的 中 文 网 上 书店 ”的 口号 ,然后 用 一 条 横 线 与 下 部 进 
行 分 隔 ; 下 部 再 分 为 左 、 右 结构 ,按照 用 户 的 操作 习惯 , 左 侧 安排 广告 语 , 右 侧 安排 “用户 
登录 ”的 界面 ,用 圆 角 和 矩形 边框 包围 ,包含 的 表单 内 容 为 供 E-mail 账号 和 密码 信息 输入 的 
文本 框 和 “登录 ”按钮 ,并 为 会 员 提供 找 回 密码 功能 和 快速 注册 功能 的 链接 文字 ,链接 到 用 
户 注册 页 面 。 整 体 效果 如 图 2-7 和 图 2-8 所 示 。 
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2-7 ”登录 页 版 面 设计 稿 


2.3.3 “叮当 网 上 书店 ”图 书 分 类 页 版 面 设 计 稿 


图 书 分 类 页 面 主要 功能 是 对 图 书 进行 分 类 列表 展示 。 根 据 风格 统一 性 原则 , 头 部 和 
底部 也 沿用 首页 的 设计 ,主体 部 分 顶部 添加 页 面 导 航 , 给 出 “您 现在 的 位 置 : 叮当 网 二 二 
图 书 分 类 之 之 列表 ”; 接 下 来 分 为 左 ` 右 结构 , 左 侧 沿用 首页 主体 部 分 左 侧 的 图 书 栏目 和 
品牌 出 版 社 栏目 , 右 侧 用 来 显示 分 页 .排序 (上 架 时 间 、 价 格 、 销 售 记录 等 ) ,并 提供 图 书 购 
买 ,收藏 功能 , 自 上 而 下 分 别 为 排序 方法 、 图 书 列表 和 页 码 跳 转 的 功能 模块 。 其 中 ,图 书 列 
表 中 每 页 从 上 到 下 安排 4 本 书 , 每 本 书 的 部 分 为 左右 结构 , 左 侧 放置 封面 图 片 , 右 侧 从 上 
到 下 依次 为 书 名 、 虚 线 分 隔 、 顾 客 评分 、 作 者、 出 版 社 图 书简 介 、 价 格 折扣 和 “购买 ”"“ 收 
藏 "按钮 。 整 体 效 果 如 图 2-9 和 图 2-10 所 示 。 
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叮当 网 ， 全 球 领先 的 中 文 网 上 书店 
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更 多 选择 号 
60 万 种 图 书 音像 ， 并 有 家 居 百 货 、 化 妆 品 、 数 码 等 几 十 个 类 别 共计 百 万 商品 ，2000 个 用 户 登 录 
入 驻 精 品 店 中 店 -ssil 地 址 或 昵称 : 
更 钙 价 格 ED: 
电视 购物 的 3-5 折 ， 传 统 书店 的 5-7 折 ， 其 他 网 站 的 7-9 折 登录 
更 方便 、 更 安全 
全 国 超过 300 个 城市 送 货 上 门 、 货 到 付款 。 鼠标 一 点 ， 梁 风险 购物 ， 便 捷 到 家 . 

您 还 不 是 叮当 出 用户 ? 

创建 一 个 新 用 户 
图 2-8 登录 页 版 面 设计 稿 电子 版 
周 书 9 交 
网 到 三 由 红 从 对 
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图 书 分 类 页 版 面 设计 稿 


任务 2 “叮当 网 上 书店 ”前 全 版 面 设计 


您 现在 的 位 置 : 叮当 >> 网 图 书 分 类 > 列表 ( 共 295) 


故 广 式 、[] 中 吕 口 口 


出 版 福 : 出 版 时 间 : 


原价 。 攻 事 价 折扣 : 折 节省 : 半 购买 按钮 收藏 控 组 


出 版 社 : 出 版 时 间 : 


出 版 社 : 出 版 时 间 : 


原价 。 忧 惠 价 折扣 : 折 节省 : 半 购买 控 轨 收藏 六 明 


出 版 社 : 出 版 时 间 : 


原价 。 优惠 价 折扣 ; 折 节省 : 半 购买 按钮 。 。 收 讲 按 组 


第 -= 届 中 回 辐 .… [生男 ] [到 所 -到 号 到 [页 co 


图 2-10 图书 分 类 页 版 面 设计 稿 电子 版 
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2.3.4 “叮当 网 上 书店 ?购物 车 页 版 面 设计 稿 


根据 风格 统一 性 原则 ,购物 车 页 面 的 头 部 和 底部 再 次 沿用 首页 的 设计 。 主 体 部 分 首 
先 显示 购物 车 图 片 和 “您 选 好 的 商品 : ”文字 。 接 下 来 ,考虑 到 本 页 面 的 功能 ,主要 为 已 登 
录 的 会 员 在 选 购 图 书 之 后 结算 订单 之 前 ,对 图 书 数 量 .单价 和 总 价 等 进行 列表 统计 。 列 表 
用 表格 的 形式 来 显示 。 表 格 为 内 外 赃 套 ,外 层 表格 为 3 行 1 列 , 为 浅 蓝 色 圆 角 细 线 表格 。 
表 头 为 浅 蓝 色 圆 角 背 景 ,其 中 嵌 有 一 个 5 列 1 行 的 表格 ,内 容 分 别 为 商品 号 、 商 品名 、 价 
格 、 数 量 和 操作 ; 第 二 行内 有 一 个 5 列 多 行 的 表格 , 列 与 表 头 对 应 ,为 多 选 框 、 带 链接 的 书 
名 (链接 到 图 书 详细 页 ) ,价格 折扣 、 带 数字 的 文本 框 “ 删 除 ” 及 “修改 ”链接 。 本 表格 的 功 
能 包括 对 购物 车 中 图 书 的 删除 .图 书 数量 的 编辑 、 订 单 总 价 的 自动 统计 、 继 续 购物 链接 和 
结算 等 。 在 表格 的 最 后 一 行 ,参照 图 书 分 类 页 ,安排 相同 的 页 码 跳 转 的 功能 模块 ,整个 表 
格 用 灰色 的 细 线 边框 进行 分 隔 ; 第 三 行为 圆 角 底 部 背景 。 

整体 效果 如 图 2-11 和 图 2-12 所 示 。 


ee a a 


Ri fnk 
[项 二， 


2-11 购物 车 页 版 面 设 计 稿 
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任务 2 “叮当 网 上 书店 ”前 全 版 面 设计 稿 


我 的 购物 车 。 候选 好 的 而 品 : 


商品 号 商品 名 价格 数量 操作 
商品 全 额 总 计 ; 基 您 总 共 节 省 : 香 结 算 
口 20019134 五 月 俏 家 物 滞 50 13.00 T9 新 划 队 | 个 站 
口 2D019134 五 月 全 家 物 条 Se 13 0 19g 折 但 除 | 修 骏 
口 20019134 五 月 俏 家 物语 #850 13.00 T9 新 齐 队 | 仁 双 
口 20019134 五 月 俏 家 物语 ss 3 00 19 折 贡 除 | 修改 
口 20019134 五 月 俏 家 物语 Hi 13 00 19 折 划 除 | 代 纳 
口 20019134 五 月 俏 容 物语 850 13 0 1g 折 芭 除 | 企 必 
口 20019134 五 月 俏 家 物语 .00 79 折 划 除 | 个 次 
口 20019134 五 月 俏 窜 物 条 50 二 13 0 9 折 贡院 | 修 弘 
口 20019134 五 月 俏 家 物语 -50 13.00 79 折 吉 队 | 作 必 
口 20019134 五 月 傅 容 物 滞 50 13 00 719 新 吉 除 | 性 到 
口 20019134 五 月 俏 守 物 滞 5 3.00 7 新 到 除 | 人 a 
[ESIel9l [了 一 丙 ] WN % 


图 2-12 购物 车 页 版 面 设计 稿 电子 版 


24 任务 拓展 


通过 任务 2 的 分 析 展 开 , 读 者 对 “叮当 网 上 书店 ”的 风格 有 了 一 定 的 了 解 。 根 据 统 一 
性 原则 ,知道 头 部 和 底部 与 首页 完全 一 致 。 按 照 每 个 页 面 的 功能 模块 ,将 主要 内 容 根据 合 
适 的 版 式 结构 ,安排 在 网 页 主体 部 分 。 并 适当 地 用 边框 线 进行 分 隔 。 可 上 网 查看 “当当 网 
上 书店 ”效果 进行 参考 ,使 整体 效果 美观 大 方 。 


2.4.1 “叮当 网 上 书店 ”注册 页 版 面 设计 稿 
本 页 面 的 头 部 和 底部 可 以 沿用 首页 的 设计 ,主体 部 分 主要 为 顾客 (匿名 用 户 ) 提 供 会 
员 注 册 功 能 。 用 户 注册 时 须 提供 E-mail 账号 .昵称 ,密码 及 确认 密码 等 信息 。 根 据 注册 


信息 的 需要 ,可 采用 比较 整齐 的 行列 形式 来 展示 内 容 , 读 者 可 参考 购物 车 页 面 独立 完成 此 
效果 。 
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2.4.2 “叮当 网 上 书店 ”图 书 详细 页 版 面 设计 


本 页 面 的 头 部 和 底部 也 可 沿用 首页 的 设计 。 主 体 部 分 主要 是 对 单 本 图 书 进 行 详细 展 
示 , 包 括 图 书 的 封面 图 片 . 书 名 、 作 者 、 出 版 社 ` 出 版 时 间 ISBN 原价 .折扣 、 折 扣 价 .库存 、 
简要 说 明 ,详细 说 明 等 信息 ,同时 提供 图 书 购买 ,收藏 功能 。 读 者 可 参考 图 书 分 类 页 面 安 
排 主 体 部 分 的 页 面 版 式 。 


25 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 已 经 根据 客户 需求 ,完成 了 整个 "叮当 网 上 书店 ”版 式 
的 设计 ,对 于 初次 学 习 的 广大 读者 来 说 ,可 以 上 网 大 量 浏览 优秀 的 品牌 网 站 ,对 各 种 网 站 
版 式 进行 了 解 , 对 功能 模块 的 安排 进行 探索 ,为 以 后 开发 企业 网 站 前 台 积 累 经 验 。 


26 能 力 评 估 


1. 网 页 中 常见 的 布局 格式 有 哪些 ? 
2. 网 站 设计 布局 中 框架 集 有 哪些 ? 
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任务 3 人 钉 当 网 上 书店 ”图片 素材 设计 


通过 任务 2 的 实施 ,Bill 已 经 完成 了 网 站 各 版 面 的 设计 稿 , 接 下 来 就 要 按照 设计 稿 的 
要 求 进行 页 面 框架 设计 。 在 结构 制作 过 程 中 ,我 们 需要 插入 相关 的 图 片 , 因 此 需要 使 用 
Photoshop 工具 进行 相关 图 片 的 制作 。 制 作 结束 后 ,在 结构 设计 和 效果 设计 阶段 可 以 将 
图 片 作为 网 页 元 素 插入 ,也 可 以 作为 背景 进行 页 面 美 化 。 

人 学习 目标 

(1) 熟悉 Photoshop 软件 界面 。 

(2) 熟练 掌握 图 层 的 使 用 。 

(3) 掌握 文字 工具 的 使 用 和 编辑 。 

(4) 熟练 掌握 圆 角 矩形 的 使 用 。 

(5) 熟练 掌握 前 景色 、 背 景色 和 渐变 色 填 充 。 

(6) 熟练 掌握 图 层 样 式 的 使 用 。 

(7) 熟练 掌握 切片 工具 的 使 用 和 切片 的 导出 。 

(8) 熟练 掌握 GIF 动画 的 制作 和 导出 。 

(9) 掌握 蒙 版 的 使 用 和 编辑 。 


31 任务 描述 


在 结构 制作 过 程 中 ,我 们 需要 插入 相关 的 图 片 , 因 此 需要 使 用 Photoshop 工具 进行 相 
关 图 片 的 制作 。 网 站 图 片 设计 需要 体现 网 站 的 整体 风格 ,并 且 要 有 很 好 的 用 户 体验 度 。 
我 们 从 以 下 几 个 方面 进行 图 片 的 制作 。 

1. Logo 制作 

Logo 是 网 站 特色 和 内 涵 的 集中 体现 。 网 站 强大 的 整体 实力 ,优质 的 产品 和 服务 都 被 
涵盖 于 标志 中 。Logo 是 网 站 广告 宣传 .文化 建设 .对 外 交流 中 必 不 可 少 的 元 素 。 因 此 首 
先 需 要 完成 Logo 图 片 的 制作 。 

2.“ 购 买 ”按钮 制作 


“叮当 网 上 书店 ”是 一 个 电子 商务 平台 ,需要 给 用 户 提供 图 书 购买 功能 ,网 站 的 视 
觉 效 果 还 是 很 影响 用 户 体验 的 ,因此 制作 一 个 美观 的 “购买 按钮 ,能 够 提升 用 户 的 购 
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物体 验 。 
3. 导航 按钮 制作 


导航 按钮 的 功能 主要 是 让 用 户 更 快速 有 效 地 浏览 网 站 ,准确 地 找到 自己 需要 获取 的 
信息 ,进而 增加 网 站 黏度 ,达到 优化 用 户 体验 的 目的 。 


4. GIF 动画 制作 


根据 设计 稿 的 要 求 ,首页 中 的 列表 项 和 标题 前 面 的 项 目 符号 是 动态 效果 ,因此 需要 创 
建 一 个 由 多 个 帧 组 成 的 GIF 动画 。 把 单一 的 画面 扩展 到 多 个 画面 ,形成 一 个 连续 循环 的 
动作 。 


5.Banner 制作 


页 面 中 Banner 的 功能 是 让 用 户 对 网 站 主题 有 初步 的 了 解 和 认识 ,同时 增加 内 容 的 
趣味 度 和 内 容 方 向 引导 。Banner 是 一 种 网 络 广告 形式 ,一 般 放 置 在 网 页 上 的 不 同位 
置 ,在 用 户 浏览 网 页 信息 的 同时 ,吸引 用 户 对 于 广告 信息 的 关注 ,从 而 获得 网 络 营销 的 
效果 。 


32 相关 知识 


3.2.1 Photoshop 工作 环境 


Photoshop 是 基于 Windows 平台 运行 的 图 形 图 像 处 理 程序 。 它 的 功能 非常 强大 , 支 
持 多 种 图 像 格式 和 颜色 模式 ,能 同时 进行 多 图 层 处 理 。Photoshop 的 工作 界面 如 图 3-1 
所 示 。 


3.2.2 像素 与 分 辨 率 


1. 像素 


像素 是 组 成 图 像 的 最 基本 的 单元 , 它 是 一 个 小 的 方形 的 颜色 块 。 一 个 图 像 通常 由 许 
多 像素 组 成 , 当 用 缩放 工具 将 图 像 放 到 足够 大 时 ,就 可 以 看 到 类 似 马赛 克 的 效果 ,其 中 每 
个 小 方块 就 是 一 个 像素 。 


2. 分 辩 率 
图 像 分 辨 率 是 指 单位 长 度 内 的 点 、 像 素 或 墨 点 的 数量 ,通常 用 “像素 /英寸 "和 “像素 / 
厘米 表示 。 单 位 面积 内 的 像素 越 多 , 则 分 辩 率 越 高 ,图像 越 清 晰 ,反之 图 像 越 模糊 。 
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任务 3 “叮当 网 上 书店 ”图 片 素材 设计 


活动 面板 


工作 区 域 


忆 国 PCSrnSsecmssrsssas0 7 


3-1 ”Photoshop 工作 界面 


3.2.3 位 图 和 矢量 图 


1. 位 图 


位 图 是 由 许多 点 组 成 的 ,其 中 每 一 个 点 即 为 一 个 像素 ,每 一 个 像素 都 有 自己 的 颜色 和 
强度 。 这 些 位 置 .像素 决定 图 像 所 呈现 的 最 终 样式 。 通 常 看 到 的 风景 人物 等 图 像 文件 都 
是 位 图 图 像 。 位 图 色彩 变化 非常 丰富 ,图 像 容量 大 。 在 以 低 于 创建 时 的 分 辩 率 缩放 或 打 
印 图 像 时 ,会 使 图 像 呈现 锯齿 状 效果 。 


2. 矢量 图 


矢量 图 又 称 为 向 量 图 ,是 由 线条 和 色 块 组 成 的 图 像 。 矢 量 图 根据 图 像 的 几何 特性 描 
绘图 像 。 其 造型 最 基本 的 元 素 是 点 ` 线 \ 面 ,所 占 的 空间 小 。 矢 量 图 形 与 分 辨 率 无 关 , 在 进 
行 放大 操作 时 ,不 会 影响 图 形 的 清晰 度 。 
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3.2.4 图 像 的 颜色 模式 


1. RGB 模式 


彩色 图 像 中 每 个 像素 的 R、G、B 分 量 指定 一 个 介 于 0( 黑 色 ) 到 255( 白 色 ) 之 间 的 强度 
值 。R、G、B 分 别 代 表 红 、 绿 、 蓝 ,两 位 十 六 进 制 数 代表 一 种 颜色 ,范围 为 00 一 ff。 颜 色 值 
用 一 个 十 六 进 制 数 (用 “##” 作 为 前 缀 ) 表 示 。 


2. CMYK 模式 


CMYK 模式 的 图 像 由 青 (C) 、 洋 红 (M) 、 黄 (Y) 、 黑 (K) 四 种 颜色 构成 。4 个 值 分 别 为 
每 个 像素 的 每 种 印刷 油墨 指定 的 百分比 值 , 主 要 用 于 彩色 印刷 。 


3. 索引 模式 


索引 模式 的 图 像 仅 包含 256 种 颜色 。 如 果 原 图 像 中 颜色 不 能 用 256 色 表 现 , 则 从 可 
使 用 的 颜色 中 选 出 最 相近 颜色 来 模拟 这 些 颜 色 。 索 引 模式 多 用 于 媒体 动画 制作 或 网 页 制 
作 , 图 像 文件 较 小 。 


4. 灰 度 模式 

灰 度 色 是 指 纯 白 、 纯 黑 以 及 两 者 之 间 的 一 系列 从 黑 到 和 白 的 过 渡 色 。 灰 度 模式 使 用 
256 级 灰 度 。 
3.2.5 图 像 的 格式 


1. PSD 格式 


PSD 格式 是 Photoshop 的 专用 图 像 文件 格式 ,可 以 存储 Photoshop 中 所 有 的 图 层 、 
通道 .路径 .参考 线 .注解 和 颜色 模式 等 信息 ,文件 比较 大 。 


2. JPG 格式 


JPG 是 一 种 图 像 压 缩 格 式 , 可 以 存储 RGB 或 CMYK 模式 的 图 像 ,可 以 嵌入 路 径 , 被 
广泛 用 于 Internet。 


3. GIF 格式 


GIF 是 网 页 上 通用 的 图 像 文件 格式 ,用 来 存储 索引 颜色 模式 的 图 像 。GIF 采用 LZW 
无 损 压 缩 , 可 以 将 数 张 图 像 存储 到 一 个 文件 中 ,形成 动画 效果 。 


4. PNG 格式 


PNG 是 Adobe 公司 针对 网 络 图 像 开发 的 文件 格式 。 这 种 格式 可 以 使 用 无 损 压 缩 方 
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式 压 缩 图 像 文 件 , 并 利用 Alpha 通道 制作 透明 背景 。 
3.2.6 图 层 


1. 图 层 的 概念 


图 层 是 构成 图 像 的 重要 组 成 单位 ,每 个 图 层 都 由 许多 像素 组 成 ,而 图 层 又 通过 蚕 加 方 
式 组 成 整个 图 像 。 打 个 比喻 ,每 个 图 层 就 好 似 一 面 透明 “玻璃 ”, 当 各 面 “ 玻 璃 ”中 都 有 图 像 
时 ,俯视 所 有 图 层 , 可 以 看 到 完整 的 图 像 ,如 图 3-2 所 示 。 如 果 “ 玻 璃 ”中 什么 都 没有 , 它 就 
是 个 完全 透明 空 图 层 。 


C++seagemean 


图 3-2 分 层 效 果 和 显示 效果 比较 


2. 图 层 的 特点 
(1) 图 层 有 上 下 关系 。 
(2) 图 层 可 以 移动 。 
(3) 图 层 相 对 独立 。 
(4) 图 层 可 以 合并 。 


3. 图 层 样式 


(1) 概念 

图 层 样 式 是 Photoshop 中 用 于 制作 各 种 效果 的 强大 功能 。 利 用 图 层 样式 功能 ,可 以 
简单 快捷 地 制作 出 各 种 立体 投影 .各 种 质感 以 及 光景 效果 的 图 像 特效 。 图 层 样 式 具 有 速 
度 更 快 ,效果 更 精确 ,更 强 的 可 编辑 性 等 无 法 比拟 的 优势 。 图 层 样式 是 应 用 于 一 个 图 层 或 
图 层 组 的 一 种 或 多 种 效果 。 可 以 应 用 Photoshop 附带 提供 的 预 设 样式 ,也 可 以 应 用 “图 层 
样式 ?对 话 框 来 创建 自 定 样式 。 应 用 图 层 样式 十 分 简单 ,可 以 为 普通 图 层 、 文 本 图 层 和 形 
状 图 层 等 图 层 应 用 图 层 样 式 。 

(2) 斜面 和 浮雕 图 层 样式 

斜面 和 浮雕 可 以 说 是 Photoshop 图 层 样式 中 最 复杂 的 ,其 中 包括 内 斜面 .外 斜面 、 浮 
雕 \ 枕 形 浮雕 和 描 边 浮雕 ,虽然 每 一 项 中 包含 的 设置 选项 都 是 一 样 的 ,但 是 制作 出 来 的 效 
果 却 大 有 区 别 , 大 家 可 以 在 练习 中 不 断 体会 。 
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(3) 描 边 图 层 样式 

描 边 非常 直观 ,也 非常 简单 ,就 是 沿 着 图 层 的 非 透明 边缘 加 上 一 个 描 边 的 效果 。 在 描 
边 样 式 的 参数 当中 ,我 们 归结 了 两 大 类 ,分别 是 结构 类 型 和 填充 类 型 。 在 结构 当中 ,有 大 
小 、 位 置 、 混 合 模式 和 不 透明 度 ; 而 在 填充 类 型 中 ,会 有 颜色 的 选择 。 


3.2.7 Photoshop 常用 工具 


1. 选 框 工具 


选 框 工具 包含 4 个 工具 : 矩形 选 框 工具 、 椭 圆 选 框 工具 、 单 行 选 框 工具 、 单 列 选 框 工 
具 。 选 框 工具 用 来 选择 和 矩形、 椭圆 形 以 及 宽度 为 1 个 像素 的 行 和 列 。 默 认 情 况 下 ,从 选 杠 
的 一 角 拖 动 绘制 选 框 。 使 用 矩形 选 框 工具 时 ,在 图 像 中 确认 要 选择 的 范围 , 按 住 鼠 标 左 键 
不 放 拖 动 鼠标 , 即 可 选 出 要 选取 的 选区 。 

矩形 选 框 工具 属性 栏 如 图 3-3 所 示 , 各 属性 说 明 如 下 。 

(1) 新 选区 | 图 : 创建 一 个 新 的 选区 。 

(2) 添加 到 选区 锡 : 在 原 有 选区 的 基础 上 ,继续 增加 一 个 选区 ,也 就 是 将 原 选 区 扩大 。 

(3) 从 选区 减 去 吕 : 在 原 选区 的 基础 上 剪 掉 一 部 分 选区 。 

(4) 与 选取 交叉 号 : 执行 的 结果 是 得 到 两 个 选区 相交 的 部 分 。 

(5) 羽化 : 实际 上 是 选区 边缘 的 虚 化 值 , 羽 化 值 越 高 ,选区 边缘 越 模糊 。 

(6) 消除 锯齿 只 有 在 使 用 椭圆 选 框 工具 时 ,这 个 选项 才 可 使 用 , 它 决 定 选 区 的 边缘 
光滑 与 否 。 

(7) 样式 : 正常 一 一 通过 拖 动 确定 选 框 比例 。 固 定 长 宽 比 一 一 设置 高 宽 比 。 固 定 大 
小 一 一 为 选 框 的 高 度 和 宽度 指定 固定 的 值 。 


IEHEae 男 | 别人 :ap 王 消 院 晶 襄 | [可 全 二 
图 3-3 ”和 矩 形 选 框 工具 属性 栏 


2. 文字 工具 

在 Photoshop 中 提供 了 4 种 文字 模式 ,如 图 3-4 所 示 。 按 功 2 
能 分 类 可 以 分 为 两 大 类 : 文字 处 理 类 以 及 文字 蒙 版 类 ,其 中 横 排 |T) = 下 信 家 
文字 工具 ,垂直 文字 工具 属于 前 者 ,而 模 排 文字 蒙 版 工具 垂直 访 ee 
文字 蒙 版 工具 属于 后 者 。 本 Eee 

选择 一 种 文字 工具 后 ,会 出 现 文字 工具 选项 栏 。 可 以 预先 。 “5 
在 这 里 设置 文字 的 字体 ,大 小 等 各 项 属性 ,然后 再 输入 文字 。 图 34 文字 工具 


还 可 以 执行 “窗口 ?|* 字 符 和 段落 ?命令 打开 * 字 符 ? 面 板 和 ”段落 ?面板 组 成 的 面板 组 ， 
如 图 3-5 所 示 。 利 用 此 面板 组 来 控制 文字 和 段落 的 各 项 设 定 。 
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3-5 “字符 ”面板 和 “段落 ”面板 


3. 渐变 工具 


在 设计 中 经 常 使 用 到 色彩 渐变 , 即 从 某 一 种 或 多 种 颜色 过 渡 到 某 一 种 或 多 种 颜色 。 
使 用 渐变 工具 可 以 创建 多 种 颜色 间 的 逐渐 混合 。 实 际 上 就 是 在 图 像 中 或 者 图 像 的 某 一 部 
分 区 域 填 人 一 种 具有 多 种 颜色 过 渡 的 混合 颜色 ,可 以 是 从 前 景色 到 背景 色 的 过 渡 ,也 可 以 
是 前 景色 与 透明 背景 间 的 相互 过 滤 或 者 是 与 其 他 颜色 的 相互 过 渡 。 渐 变 工具 选项 栏 如 
图 3-6 所 示 。 


-| | OMEOO {x [EX 不 通明 度 :100%》] | 口 反 向 ” 回 仿 色 。” 回 透 明 区 域 


3-6 渐变 工具 选项 栏 


下 面 对 该 工具 栏 中 的 各 项 参数 进行 讲解 。 

(1) 浙 变 编辑 器 国防 可: 在 此 下 拉 列 表 框 中 显示 渐变 颜色 的 预览 效果 。 单 击 它 打 
开 渐 变 编辑 器 的 下 拉 列 表 ,在 其 中 可 以 选择 一 种 渐变 颜色 进行 填充 。 也 可 以 单 击 渐变 编 
辑 器 ,在 色 带 中 自 定义 渐变 色 。 

(2) 渐变 类 型 喇 目 晤 已 面 : 这 里 有 5 种 渐变 类 型 可 以 设置 ,分 别 是 线性 渐变 、 径 向 渐 
变 、 角 度 渐变 、 对 称 渐变 、 萎 形 渐变 。 

(3) 模式 : 选择 渐变 的 混合 模式 。 

(4) 反 向 : 色 选 后 ,填充 后 的 渐变 颜色 刚好 与 用 户 设置 的 渐变 颜色 相反 。 

(5) 仿 色 : 勾 选 后 ,可 以 增加 中 间 色 调 , 使 用 渐变 效果 更 加 平衡 。 

(6) 透明 区 域 : 匀 选 后 ,将 打开 透明 蒙 版 功能 ,使 渐变 填充 可 以 应 用 透明 设置 。 


相关 链接 
(1) 色 标 中 点 
在 色 标 与 色 标 之 间 有 一 个 小 鞭 形 , 称 为 色 标 中 点 , 它 决 定 两 种 相 邻 颜色 的 分 配 比例 ， 
默认 是 50% ,代表 两 种 颜色 平均 分 配 。 如 果 将 该 点 向 菜 一 个 色 标 移动 则 代表 该 色 的 比例 
减 小 。 色 标 中 点 的 位 置 百分比 是 针对 相 邻 两 种 颜色 之 间 的 区 域 的 ,是 一 种 相对 位 置 ,不 能 
设置 颜色 。 选 择 色 标 中 点 后 在 “位 置 ?处 输入 数值 ,如 图 3-7 所 示 。 
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3-7 设置 色 标 中 点 数值 


(2) 删除 色 标 

要 删除 菜 个 色 标 ,直接 将 色 标 拖 出 色 带 即 可 。 

(3) 不 透明 度 标的 设置 

不 透明 度 标 的 操作 方法 (增加 修改、 移动 删除) 与 色 标 完全 一 致 。 相 邻 的 两 个 不 透 
明度 标 也 有 一 个 中 点 控制 着 分 配 比 例 。 与 色 标 用 彩色 来 表示 其 所 指定 的 颜色 类 似 ,不 透 
明度 标 用 灰 度 来 表示 其 所 代表 的 不 透明 度 。 黑 色 为 100% , 即 完 全 不 透明 ; 和 白色 为 0%， 
即 完 全 透明 。 


4. 切片 工具 


切片 工具 是 在 设计 Web 页 中 用 来 分 割 页 面 的 常用 工具 ,就 像 在 Dreamweaver 中 绘 
制 表格 一 样 。 

Photoshop 中 的 网 页 设计 工具 可 以 帮助 用 户 设 计 和 优化 单个 网 页 图 形 或 整个 页 面 布 
局 。 使 用 切片 工具 可 将 图 形 或 页 面 划 分 为 若干 相互 紧密 衔接 的 部 分 ,并 对 每 个 部 分 应 用 
不 同 的 压缩 和 交互 设置 。 

切片 分 为 两 种 : 一 种 是 用 户 切片 ,就 是 用 户 用 切片 工具 在 图 像 上 切割 出 来 的 切片 ; 
另 一 种 是 衍生 切片 ,是 由 用 户 切 片 衍生 出 来 的 。 


3.2.8 参考 线 


参考 线 是 浮 在 整个 图 像 窗口 中 但 不 被 打印 的 直线 。 用 户 可 以 移动 ,删除 或 锁定 它 。 

1. 参考 线 的 创建 

参考 线 也 可 以 直接 从 标尺 栏 中 拖 出 , 即 在 水 平 标尺 上 按 住 左 键 不 放 并 向 下 拖 动 到 所 
需 的 位 置 , 然 后 松 开 左 键 ,就 创建 了 一 条 水 平 参考 线 。 也 可 以 使 用 "视图 ”|* 新 建 参考 线 ” 
命令 进行 精确 添加 。 

2. 参考 线 的 删除 

要 删除 参考 线 ,可 直接 将 参考 线 拖 动 到 图 片 之 外 。 

3. 锁定 参考 线 


在 菜单 栏 中 执行 “视图 ”| ”锁定 参考 线 ” 命 令 ,可 将 参考 线 锁定 ,这 样 就 不 会 移动 和 编 
辑 参考 线 了 。 
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3.2.9 Photoshop 与 GIF 动画 


GIF 动画 图 片 是 在 网 页 上 经 常 看 到 的 一 种 动画 形式 ,画面 活泼 生动 , 引 人 注 目 。 不 仅 
可 以 吸引 浏览 者 ,还 可 以 增加 点 击 率 。GIF 文件 的 动画 原理 是 ,在 特定 的 时 间 内 显示 特定 
画面 内 容 , 不 同 画面 连续 交替 显示 ,从 而 产生 动态 画面 。 

Photoshop CS3 之 前 的 版 本 都 是 借助 ImageReady 制作 GIF 动画 的 ,Photoshop CS3 
Extended 10. 0. 1 可 以 完成 ImageReady 的 GIF 动画 制作 工作 。 执 行 “ 窗 口 ”| ”动画 ”命令 
即 可 开启 GIF 动画 制作 功能 。 制 作 动画 的 面板 和 各 按钮 功能 如 图 3-8 所 示 。 


过 渡 动画 帧 复制 所 选 帧 


当前 帧 
当前 帧 停留 时 间 坟 二 1 
oi nl a 和 
选择 第 一 帧 -这 播放 凡 前 动 西 一 一 竹 除 所 和 

图 3-8 动画 面板 和 按钮 功能 


相关 链接 

帧 是 影像 动画 中 最 小 单位 的 单 幅 影像 画面 ,相当 于 电影 胶片 上 的 每 一 格 镜头 。 
就 是 一 幅 静 止 的 画面 ,连续 的 帧 就 形成 动画 ,如 电视 图 像 等 。 我 们 通常 说 的 帧 率 , 简 单 地 
说 ,就 是 在 1 秒 钟 时 间 内 显示 的 图 片 的 帧 数 , 通 常用 fps(frames per second) 表 示 。 每 一 
帧 都 是 静止 的 图 像 , 快 速 连续 地 显示 帧 便 形 成 了 运动 的 假象 。 更 高 的 帧 率 可 以 得 到 更 流 
畅 、 更 逼真 的 动画 。 每 秒 钟 帧 数 愈 多 ,所 显示 的 动作 就 会 愈 流畅 。 


3.2.10 蒙 版 


1. 蒙 版 的 概念 


在 编辑 图 像 中 ,为 了 方便 地 显示 和 隐藏 原 图 像 并 且 保 护 原 图 像 不 被 更 改 的 技术 称 为 
蒙 版 。 蒙 版 是 将 不 同 灰 度 色 值 转化 为 不 同 的 透明 度 ,并 作用 到 它 所 在 的 图 层 , 使 图 层 不 同 
部 位 透明 度 产 生 相 应 的 变化 。 黑 色 为 完全 透明 ,白色 为 完全 不 透明 ,灰色 就 是 半 透 明 。 


2. 蒙 版 的 优点 


(1) 在 不 破坏 原 图 像 的 情况 下 ,可 以 比较 灵活 地 显示 和 隐藏 图 像 ,使 图 像 之 间 更 加 自 
然 地 融合 在 一 起 。 
(2) 修改 方便 ,不 会 因为 使 用 橡皮 擦 或 剪 切 、 删 除 工具 而 造成 不 可 挽回 的 遗憾 。 
(3) 可 运用 不 同 滤 镜 ,以 产生 一 些 意 想不到 的 特效 。 
(4) 任何 一 幅 灰 度 图 像 都 可 作为 蒙 版 使 用 。 
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3. 蒙 版 的 种 类 

(1) 图 层 蒙 版 

图 层 蒙 版 是 指 根据 选择 区 或 目标 图 层 的 整个 画布 创 ”ss spa 
建 的 蒙 版 ,一 般 在 含有 不 少 于 2 个 图 层 以 上 的 画布 中 ,给 于 不 0% 和 
位 于 上 方 的 图 层 添加 蒙 版 。 通 过 “图 层 "面板 底部 的 画 全 :日 7 二 8 坑 计 100%。 
按钮 为 图 层 添加 蒙 版 ,如 图 3-9 所 示 。 SE I 

(2) 秋 量 蒙 版 gm: 9 


矢量 蒙 版 是 指 根据 路 径 创建 的 蒙 版 (背景 图 层 无 法 基 
于 路 径 创 建 图 层 蒙 版 ,但 创建 后 的 矢量 蒙 版 可 反复 修改 )， 
但 必须 首先 创建 路 径 。 
(3) 剪贴 蒙 版 -er 
使 用 前 贴 蒙 版 可 以 将 当前 图 层 与 它 相 邻 的 下 一 个 图 
层 之 间 联 合 起 来 ,最 终 的 效果 是 只 能 在 下 一 个 图 层 所 在 对 
象 的 区 域 查看 到 当前 图 层 所 在 的 对 象 ,但 此 时 仍然 可 以 对 
当前 图 层 所 在 的 对 象 进行 各 种 操作 。 图 层 的 关系 如 图 3-10 所 示 。 


图 3-9 添加 图 层 蒙 版 


3-10 ”剪贴 蒙 版 的 图 层 关系 


国 (4) 快速 蒙 版 
快速 蒙 版 是 对 选区 的 操作 ,使 用 快速 蒙 版 一 般 先 用 选区 工具 
也 建立 一 个 选区 ,通过 工具 栏 中 的 快速 蒙 版 按钮 ( 见 图 3-11) 进 入 快 


图 3.11 快速 此 版 按钮 迷蒙 版 状态 ,再 采用 画笔 涂抹 ,最 后 退出 快速 蒙 版 状态 。 
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3.3.1 “叮当 网 上 书店 ”Logo 制作 


1. 新 建文 件 
(1) 启动 Photoshop CS4, 新 建 一 个 大 小 为 87X40 像素 .背景 透明 的 文件 ,如 图 3-12 所 示 。 
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名 称 (N): 未 标题 -1 
三” 预 设 (P): 自 定 


大 小 (J _ 村 
宽度 (w)}:[7] 国 | - 出 逐 预 设 (D)… 
高 度 (HE 醒 ] - 


Device Centra(E)... 
分 状 硅 (R): 72 像素 /英寸 ~ 


颜色 模式 (M): RGB 颜色 ~， 8 位 ~ 
nO: 轨 |]  - 


图 3-12 新 建文 件 窗口 


(2) 在 “图 层 ” 面 板 中 单 击 团 按钮 ,双击 图 层 1, 将 其 重 命名 为 name, 如 图 3-13 所 示 。 


EE 


图 3-13 “图 层 ” 面 板 状 态 图 3-14 文字 输入 状态 
2. 输入 文字 并 编辑 


(1) 单 击 工具 栏 中 的 横 排 文字 工具 中, 在 图 像 制 作 区 单 击 ,输入 “叮当 网 "字样 ,如 
图 3-14 所 示 。 

(2) 选中 “叮当 网 ”3 个 字 ,在 文字 工具 选项 栏 中 设置 字体 (方正 综艺 简体 ) 和 字号 (可 
直接 输入 数字 28) 。 双 击 颜色 块 , 在 “选择 文本 颜色 ?中 设置 颜色 号 为 #01a77f, 如 图 3-15 
所 示 。 

(3) 单 击 文字 工具 选项 栏 右 侧 的 “属性 ”按钮 国 ,弹出 “字符 ”面板 ,如 图 3-16 所 示 ,将 
所 选 文字 的 字 距 调整 为 50。 

3. 制作 网 址 部 分 

(1) 新 建 图 层 2, 将 其 重 命名 为 address。 

(2) 使 用 矩形 选 框 工具 加 在 Logo 底 端 绘制 一 个 矩形 区 域 , 宽 度 为 Logo 的 宽度 ,如 


图 3-17 所 示 。 
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图 3-15 文字 选项 


7+ 
me 本 
rm cn 
mo Bm 
WE 必 

RE Ap 可 
CC 


二 时 本 覃 学 重量 寻 叮当 网 
美国 英语 下 a| 锐 利 局 | 、 


图 3-16 “字符 ”面板 图 3-17 绘制 选区 


(3) 单 击 前 景色 色 块 面 | ,在 色 板 中 选择 颜色 ,将 前 景色 设置 为 #f67820。 按 Alt 十 Delete 
键 为 选区 填充 前 景色 ,再 按 Ctrl 十 D 键 取 消 选区 ,如 图 3-18 所 示 。 

(4) 选择 横 排 文字 工具 ,在 橙色 色 块 上 单 击 ,在 “图 层面 板 中 会 自动 出 现 一 个 新 文字 
图 层 。 在 插入 点 处 输入 “dingdang. com”, 并 设置 字符 各 选项 ,如 图 3-19 所 示 。 


招 色 于 ( 前 梳 色 ) 


| 


= ES 
ems 加 wam 

三 | 上 可 素 [6 动 ”本 

Ts% 下 joy 


更 上 由 25 度 OL 65 


S 87 % Oa 46 轴 |o” 如 
DB: % % Ob: 66 可 历 ”可 本 六 可 
or 画 | cz % a 
196: 120 M: 66 % 一 
加 只 有 Web 黄色 -上 开本 一 bt 关 国 其 汪 -| pr 
图 3-18 选区 填 色 图 3-19 英文 字符 选项 设置 
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(5) 在 网 站 目录 中 创建 一 个 images 文件 夹 。 然 后 在 Photoshop 中 单 击 “ 文 件 ”|“ 存 

储 ” 命 令 ,在 弹出 的 “存储 为 "对话 框 中 ,选择 保存 位 置 为 images 文件 夹 , 在 “文件 名 ”文本 
框 中 输入 “logo. psd”, 单 击 “ 保 存 ” 按 钮 保存 文件 ,如 图 3-20 所 示 。 


E>) 
保存 在 0): 莉 inages ~ 回话 忆 回 - 
Be 没有 与 搜索 冬 件 玫 配 的 项 ， 
人 <» 
最 近 沪 辣 的 位 和 
训 面 
库 
计算 机 
文件 名 中 logo. psd ~ 保存 G) 
格式 0 罗 : Fhotoshop (e. PSD;#. POD) =] [ER] 
存储 选项 
存 傅 : 回 作 为 虽 本 (Y) 注释 (N) 
Alpha 通道 (E) 专 色 (P) 
回 图 层 (L) 
Me: 使 用 校 样 设置 (0): 工作 中 的 CMYK 
回 IcC 配置 义 件 (C): sRGB IEC61966-2.1 
编 上 图 (T) 加 使 用 小 瑟 扩展 名 (U) 
上 


3-20 “存储 为 "对话 框 


(6) 单 击 “ 文 件 ”1 “存储 为 "命令 ,在 “格式 ”下拉 列 表 框 中 选择 * . png, 以 原文 件 名 
存储 。 


3.3.2 “购买 ”按钮 图 片 制 作 


1. 制作 按钮 浮雕 效果 


(1) 新 建 69X21 像素 的 Photoshop 文件 ,背景 为 透明 ,将 图 层 1 命名 为 bg。 

(2) 将 前 景色 置 为 橙色 # ff7100, 按 Alt 十 Delete 键 在 bg 层 填 充 前 景色 。 

(3) 在 “图 层 ?面板 底部 单 击 画 j 按 钮 ,在 菜单 中 选择 “斜面 与 浮雕 ”命令 ,如 图 3-21 所 
示 ,打开 * 图 层 样式 ?对 话 框 。 

(4) 在 “图 层 样式 ?对 话 框 中 设置 斜面 和 浮雕 参数 ,如 图 3-22 所 示 。 

(5) 单 击 “ 确 定 ” 按 钮 ,为 bg 图 层 添 加 样式 。 
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ES 
i 一 
人 ee Er | 二 已 
日 内 阴影 方法 (Q@): 平滑 ” 新 建 样式 (W)… 
口外 发 光 琛 度 Dj: 一 全 回 和 NICV) 
回 内 发 光 方向 : 加 上 OF 
EEEEE 大 Na: 过 国 
EB 软化 时 :全 素 
ES 三 本 
EE 角度 00: 20 度 
pt © 器 使 用 全 局 光 (G) 
下 省 各 加 SR 
问 图 党 可 加 
EE | me 
高 光 模式 (1): = 上 
通明 度 o): T % 
阴影 模式 (A): 正片 到 底 可 ”| 


Tc 一 一 0 一 一 区 ]* 


设置 BiV 值 | | 夏 位 zaV 值 ) 


3-21 图 层 样 式 列表 菜单 


2. 添加 文字 和 购物 车 图 标 


(1) 在 工具 栏 中 选择 横 排 文字 工具 ,在 制作 区 的 背景 上 单 击 ,在 插入 点 处 输入 "购买 ” 
字样 ,在 “字符 ?面板 中 设置 文字 效果 ,如 图 3-23 所 示 。 
(2) 在 Photoshop 中 打开 “购物 车 图 标 . png”, 按 Ctrl 十 A 键 全 选 , 按 Ctrl 十 C 键 复 
制 。 切 换 到 “购买 ”按钮 文件 , 按 Ctrl 十 V 键 粘贴 。 
(3) 使 用 移动 工具 ,将 购物 车 图 标 放置 到 合适 位 置 。“ 图 层 ? 面 板 和 按钮 最 终 效 果 如 


图 3-24 所 示 。 


于 尼克» 可 
ro ”Fho% 
四 | 本 
全 辣 长 才 | 
二 [点 el | 


人 


a "EE 
图 3-23 字符 选项 设置 


图 3-22 ”斜面 和 浮雕 参数 设置 


3-24 ”购买 最 终 效 果 


(4) 将 文件 保存 为 but_buy. psd, 再 另存 为 but_buy. png。 


3.3.3 头 部 高 级 搜索 按钮 背景 的 制作 


(1) 新 建文 件 ,大 小 为 33X29 像素 ,背景 透明 。 
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(2) 按 Ctrl 十 R 键 , 打 开标 尺 。 

(3) 单 击 “视图 ”| * 新 建 参 考 线 ”命令 ,在 弹出 的 对 话 框 中 选择 “垂直 ”, 设 置 位 置 为 
lpx, 如 图 3-25 所 示 。 

(4) 使 用 同样 的 方法 再 设置 3 条 参考 线 ,分 别 为 垂直 32px\ 水 平 1px、 水 平 28px, 效 果 
如 图 3-26 所 示 。 


取向 


加 水 平 (H) 
辐 委 直 (V) 


位 置 (P): lp 


图 3-25 “新 建 参考 线 " 对 话 杠 图 3-26 新建 参 考 线 效果 


(5) 在 工具 栏 中 选择 圆 角 矩形 工具 国 ,在 工具 选项 栏 中 将 半径 设置 为 2px, 如 图 3-27 
所 示 。 


EH] F900NG ERIC ER ED 
图 3-27 圆 角 矩形 工具 选项 栏 


(6) 将 前 景色 设置 为 白色 ,以 参考 线 左 上 角 的 交点 为 起 点 ,在 绘 
图 区 的 参考 线 范围 内 绘制 圆 角 和 矩形 ,如 图 3-28 所 示 。 
(7) 在 “图 层 ” 面 板 底部 单 击 乱 | 按 钮 ,在 菜单 中 选择 “ 描 边 ” 命 
令 , 打 开 * 图 层 样式 ?对话 框 , 设 置 描 边 样 式 参数 (大 小 为 1 像素 、 颜 
色 为 浅 灰 色 ) ,如 图 3-29 所 示 。 最 终 效果 如 图 3-30 所 示 。 
(9) 将 文件 保存 为 adsearch. psd, 再 另存 为 adsearch. png。 3-28 白色 圆 角 矩 形 


填充 类 型 fF): 碳 色 ~ 


se[ 国 |] 


图 3-29 ” 描 边 样式 参数 设置 图 3-30 高 级 搜索 按钮 背景 最 终 效果 


3.3.4 导航 按钮 背景 图 片 制作 


1. 为 圆 角 和 矩 形 设置 渐变 色 
(1) 新 建文 件 ,大 小 为 393X 34 像素 ,背景 为 透明 。 
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(2) 选择 圆 角 矩 形 工具 ,在 工具 选项 栏 中 设置 圆 角 半径 为 4px, 设 置 圆 角 和 矩形 固定 大 
小 为 W: 393px,H: 34px。 在 画布 左上 角 单 击 ,在 图 层 1 绘制 圆 角 矩形 ,如 图 3-31 所 示 。 


日 -| 92g| Da 同 © © /Ate mr lt ER ， - 
bg psd @ 200% (9 公国 出 拭 用 硕 一 一 


DT 党 
bc 人 
回国 EE 大 小 W: 393px 出 34px 

Oy w(t 
口 从 中 心 口 对 齐鲁 素 


图 3-31 绘制 固定 大 小 圆 角 矩形 

(3) 为 图 层 1 锁定 透明 像素 。 

注意 : 在 Photoshop 中 ,如 果 只 是 修改 活动 图 层 有 像素 的 区 域 , 并 且 要 使 该 图 层 的 透 
明 区 域 不 受 影响 ,就 要 用 锁定 透明 像素 功能 。 要 锁定 活动 图 层 的 透明 区 域 ,可 单 击 “图 层 ” 
面板 的 “锁定 透明 像素 ”图 标 | 回 ,， 此 时 “图 层 ” 面 板 中 的 图 层 名 称 右边 将 出 现 一 个 小 锁 图 
标 EC_ TI . 

(4) 选择 渐变 工具 , 单 击 工具 选 项 栏 中 的 国门 按钮 .在 渐变 色 编辑 器 窗口 下 方 
的 色 带 中 单 击 色 带 下 方 第 一 个 色 标 ,在 弹出 的 “颜色 ”对话 框 中 设置 颜色 为 # fcd7ba, 再 设 
置 下 方 最 右 端的 色 标 颜色 为 #faa95b。 

(5) 将 光标 移动 到 已 设置 好 颜色 的 色 带 下 方 , 光 标 变 为 手 状 时 单 击 ,就 会 增加 一 个 色 
标 。 设 置 新 色 标的 颜色 值 为 #f07d10, 位 置 为 40%, 如 图 3-32 所 示 。 此 时 色 带 效果 如 
3-33 所 示 。 


we: MD] en: |% ee 
图 3-32 新 色 标 颜色 值 和 位 置 图 3-33 色 带 最 终 效果 


(6) 将 渐变 色 设置 为 线性 渐变 ,从 画布 顶端 拖 动 渐变 色 到 画布 底 端 ,为 圆 角 矩形 添加 
线性 渐变 效果 ,如 图 3-34 所 示 。 


图 3-34 圆 角 矩形 渐变 效果 
(7) 为 该 渐变 层 添加 “ 描 边 ” 图 层 样式 ,大 小 为 1px, 位 置 为 内 部 ,颜色 为 # dlb4a6。 
2. 使 用 参考 线 定位 绘制 深 色 浅 色 间 隔 线 条 


(1) 新 建 6 条 垂直 参考 线 , 位 于 130px、131px、132px、261px、262px、263px 处 ; 再 新 
建 一 条 水 平 参考 线 , 位 于 31px 处 。 按 Ctrl 十 “十 ” 键 ,放大 画布 。 
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(2) 新 建 图 层 , 并 命名 为 “ 深 色 间 隔 线 条 ”。 

(3) 使 用 矩形 选 框 工具 ,在 第 1.2 条 参考 线 之 间 绘 制 如 图 3-35 所 示 的 区 域 ( 宽 为 
1px, 高 度 为 画布 高 ) ,将 前 景色 置 为 #aa6f35, 用 前 景色 填充 该 区 域 。 按 Ctrl 十 D 键 取消 
选区 ,如 图 3-35 所 示 。 

(4) 新 建 图 层 “ 浅 色 间 隔 线 条 ”, 设 置 其 前 景色 为 #f6d1b3。 用 同样 的 方法 在 第 2、3 条 参 
考 线 之 间 绘 制 线条 。 在 “图 层 ” 面 板 中 将 该 图 层 的 不 透明 度 设置 为 70%, 如 图 3-36 所 示 。 


图 3-35 绘制 深 色 间隔 线 图 3-36 ”绘制 浅 色 间隔 线 


(5) 选中 “ 深 色 线条 ”图 层 , 按 Ctrl 十 键 复制 该 图 层 , 得 到 深 色 间 隔 线条 副本 图 层 。 
选择 移动 工具 Ms , 按 住 Shift 键 ,将 深 色 副本 图 层 水 平移 动 到 第 4.5 条 参考 线 之 间 ( 可 以 
使 用 键盘 上 的 方向 箭头 微调 ), 如 图 3-37 所 示 。 


| 


3-37 绘制 深 色 线条 副本 


(6) 复制 浅 色 线条 图 层 , 并 水 平移 动 到 第 5.6 条 参考 线 中 间 位 置 。 效 果 和 图 层 关 系 
分 别 如 图 3-38 和 图 3-39 所 示 。 


| | ES 
图 3-38 间隔 线 效 果 图 3-39 图 层 关系 
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3. 使 用 切片 工具 切片 并 导出 所 需 图 片 


(1) 选择 切片 工具 ,从 画布 左上 角 开 始 , 到 第 2 条 垂直 参考 线 与 水 平 参考 线 交 叉 处 结 
束 ,进行 切片 ,编号 为 01, 如 图 3-40 所 示 。 


图 3-40 第 一 个 切片 


(2) 从 浅 色 线条 左上 角 开 始 , 到 第 5 条 垂直 参考 线 与 水 平 参 考 线 交 叉 处 结束 ,进行 切 
片 ,编号 为 02。 

(3) 再 绘制 同样 高 度 的 第 03 号 切片 ,直到 画布 右边 界 与 水 平 参考 线 交 叉 处 ,切片 最 
终 效果 如 图 3-41 所 示 。 


图 3-41 切片 最 终 效果 
注意 : 这 3 个 切片 是 连续 的 ,中 间 不 能 有 其 他 切片 。 


(4) 选择 “文件 ”1“ 存 储 为 Web 和 设备 所 用 格式 ”命令 ,选择 存储 格式 为 PNG-8, 如 
3-42 所 示 。 


图 3-42 存储 为 Web 所 用 格式 设置 窗口 
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(5) 单 击 “ 存 储 ”按钮 ,在 弹出 的 对 话 框 中 输入 名 称 为 top_bg, 单 击 “ 保 存 ” 按 钮 ,这 时 

会 在 保存 目录 下 生成 images 文件 夹 ,如 图 3-43 所 示 。 里 面 有 根据 切片 号 保存 的 所 有 图 
片 , 01、02、03 号 切片 的 图 片 为 所 需 图 片 , 将 导出 的 衍生 切片 top_bg_04. png 删除 。 


top_bg_01.png top_bg_02.png top_bg_03.png 


top_bg_04.png 


图 3-43 导出 切片 


3.3.5 分 类 导航 条 背景 的 制作 


1. 分 类 导航 条 渐变 背景 


(1) 新 建 大 小 为 15X 31 像素 的 文件 ,背景 透明 。 
(2) 选择 圆 角 矩形 工具 ,在 工具 选项 栏 中 单 击 “ 像 素 "按钮 [ 口 | ,设置 圆 角 半径 为 3px。 
(3) 单 击 唤 |- 下 拉 按 钮 ,在 选项 框 中 选择 固定 大 小 ,设置 大 小 为 W: 15px,H: 31px。 
(4) 在 画布 左上 角 绘 制 圆 角 矩形 。 
(5) 选择 工具 栏 中 的 渐变 工具 国 , , 单 击 选项 栏 中 的 渐变 色 编 辑 按钮 ,弹出 “渐变 色 ” 
编辑 器 。 
(6) 在 弹出 的 编辑 器 中 ,设置 色 带 下 方 第 一 个 色 标 颜色 
为 #fd7a03。 
(7) 双击 色 带 下 方 最 右 侧 的 色 标 ,设置 颜色 为 井 ff9231， 
单 击 “ 确 定 ” 按 钮 两 次 。 
(8) 锁定 透明 像素 ,然后 在 工具 选项 栏 中 单 击 “ 线 性 浙 
变 ” 按 钮 ,从 画 出 的 圆 角 和 矩形 的 顶端 开始 , 按 Shift 键 拖 动 直 
到 底部 ,为 圆 角 和 矩形 添加 设置 好 的 渐变 色 , 如 图 3-44 所 示 。 图 3-44 绘制 渐变 色 圆 角 背景 
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2. 为 分 类 导航 条 背景 切片 


(1) 新 建 3 条 垂直 参考 线 ,位 于 4px、5px、11lpx 处 ; 再 新 建 一 条 水 平 参考 线 , 位 于 27px 处 。 

(2) 按 Ctrl+ “十 ? 键 , 放 大 绘图 区 (可 用 Ctrl+ “一 ” 键 缩小 ) 。 

(3) 在 工具 栏 中 选择 切片 工具 ,从 绘图 区 的 左上 角 开 始 拖 动 ,一直 拖 动 到 第 一 条 垂直 
参考 线 和 水 平 参考 线 交 叉 处 ,绘制 第 01 个 切片 (编号 为 切片 01) 。 

(4) 从 第 2 条 垂直 参考 线 的 左上 角 拖 动 到 第 3 条 垂直 参考 线 与 水 平 参考 线 交 叉 处 ， 
绘制 第 02 个 切片 。 

(5) 从 第 3 条 垂直 参考 线 与 顶部 交叉 处 开始 拖 动 直到 绘图 区 右 侧 边界 与 水 平 参考 线 
交叉 处 ,绘制 出 第 03 个 切片 ,如 图 3-45 所 示 。 


3-45 ”渐变 色 圆 角 背 景 切片 效果 


(6) 选择 “文件 ”1“ 存 储 为 Web 和 设备 所 用 格式 ”命令 ,选择 存储 格式 为 png-8, 单 击 
“存储 ”按钮 。 

(7) 在 弹出 的 对 话 框 中 输入 名 称 为 bg_header, 单 击 “ 保 存 ” 按 钮 。 这 时 会 在 保存 目录 
下 生成 images 文件 夹 ,里 面 有 根据 切片 号 保存 的 所 有 图 片 , 01、02、04 切片 号 的 图 片 为 所 
需 图 片 。 


3.3.6 GIF 动画 设计 制作 


1. 绘制 杰 色 倒 三 角 


(1) 新 建 Photoshop 文件 ,大 小 为 12X12 像素 ,背景 透明 。 
(2) 在 工具 栏 中 选择 形状 工具 组 中 的 多 边 形 工具 ,在 工具 选项 栏 中 单 击 像素 按钮 
[日 | ,设置 边 数 为 3, 如 图 3-46 所 示 。 


us 加 228 906e 回 /EE EE 0% | 
3-46 多边形 工具 选择 和 设置 
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(3) 将 前 景色 置 为 #1{f7800。 
(4) 按 住 Shift 键 ,从 画布 中 部 位 置 开始 拖 动 绘制 倒 三 角形 ,如 图 3-47 所 示 。 


2. 制作 上 下 位 置 交替 循环 动画 
(1) 单 击 “ 窗 口 "1“ 动 画 ” 命 令 , 将 “动画 ”面板 打开 ,如 图 3-48 所 示 。 


图 3-47 绘制 橙色 倒 三 角 图 3-48 “动画 ?面板 


(2) 单 击 “动画 ?面板 下 方 的 “复制 当前 帧 ”按钮 辐 | ,得 到 重复 的 一 帧 ,如 图 3-49 
所 示 。 


图 3-49 复制 当前 帧 


(3) 选择 移动 工具 | ,根据 需要 使 用 人 或 + 键 将 第 二 帧 图 像 向 上 或 向 下 移动 1 像 
素 , 如 图 3-50 所 示 。 


3-50 改变 图 像 位 置 


(4) 将 这 两 帧 一 起 选中 , 单 击 0 秒 处 的 黑色 箭头 ,在 弹出 的 菜单 中 选择 0. 5 秒 ,如 
图 3-51 所 示 。 


FER 
01 秒 
02 
05 
10 
20 
50 
100 
tb. 
0.00 稍 


3-51 设置 动画 时 间 延 迟 
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(5) 单 击 “ 文 件 ”1“ 存 储 为 Web 和 设备 所 用 格式 ”命令 ,在 弹出 的 对 话 框 中 单 击 “ 存 
储 ” 按 钮 ,在 弹出 “将 优化 结果 存储 为 ”对话 框 中 输入 文件 名 index_arrow. gif, 格 式 选择 
“ 仅 限 图 像 " 选 项 ,如 图 3-52 所 示 。 


图 3-52 保存 GIF 动画 


3. 补充 说 明 


(1) 动画 的 循环 方式 

可 以 为 动画 设 定 播放 的 循环 次 数 。 在 “动画 ”面板 第 一 帧 的 下 方 有 “永远 "字样 ,这 就 
是 循环 次 数 。 单 击 后 可 以 选择 “一 次 ?或 “永远 ”, 或 者 自行 设 定 循环 的 次 数 ,如 图 3-53 所 
示 。 之 后 再 次 播放 动画 即 可 看 到 循环 次 数 设 定 的 效果 。“ 一 次 ”表示 动画 播放 一 次 结束 后 
停止 “永远 ”表示 连续 循环 播放 。 


3-53 ”设置 动画 的 循环 方式 
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(2) 在 Photoshop CS3 以 上 版 本 中 保存 GIF 动画 
@ 选择 “文件 ?|* 存 储 为 Web 和 设备 所 用 格式 ?命令 ,出现 如 图 3-54 所 示 的 对 话 框 ， 
参照 红色 区 域 中 的 设 定 即 可 。 


生日 避 人 国 癌 
图 像 大 小 

1 12 入 素 百分比 : 100 
i 二 条] 是 品 呈现 


gm EBs- ¢«-— 一 


Jamiew Central | [ 被 换 i@El 


图 3-54 “存储 为 Web 和 设备 所 用 格式 ”对 话 框 


四 窗口 右 下 方 红色 区 域 会 出 现 播放 按钮 和 循环 选项 ,在 此 更 改 循环 次 数 会 同时 更 改 
源 文件 中 的 设 定 。 


注意 : 如 果 在 上 方 的 红色 箭头 区 域内 没有 选 GIF , 则 下 方 的 “播放 "按钮 不 可 用 。 这 
是 因为 只 有 GIF 格式 才 支 持 动画 ,如 果 强 行 保存 为 其 他 格式 如 JPG 或 PNG, 则 所 生成 的 
图 像 中 只 有 第 一 帧 的 画面 。 


3.3.7 蒙 版 Banner 图 制作 


1. 图 片 素材 处 理 


(1) 在 Photoshop 中 打开 banner_bg. jpg 和 banner_pic. jpg 文件 。 
(2) 将 banner_pic 选 定 为 当前 文件 , 按 Ctrl 十 A 键 全 选 , 按 Ctrl 十 C 键 将 整个 图 像 
复制 。 
(3) 切换 到 banner_bg 文件 , 按 Ctrl 十 V 键 进行 粘贴 :在 “图 层面 板 中 会 产生 一 个 图 
层 1, 如 图 3-55 所 示 。 
47 


Web 前 端 开 发 项 目 化 教程 


3-55 ”准备 素材 


(4) 选中 图 层 1, 按 Ctrl 十 T 键 打开 变形 框 ,在 变形 工具 选项 栏 中 输入 缩放 比例 宽 和 
高 均 为 50%, 如 图 3-56 所 示 。 使 用 移动 工具 [ms 将 图 片 移动 到 画布 左 侧 合适 位 置 , 按 
Enter 键 确认 ,效果 如 图 3-57 所 示 。 


[a re rm nn 


图 3-56 素材 的 比例 缩放 


3-57 素材 位 置 关系 


2. 为 购物 车 图 片 层 添加 蒙 版 使 其 与 背景 层 融 合 


(1) 在 “图 层 ” 面 板 中 选中 图 层 1 为 当前 图 层 , 单 击 
“图 层 ” 面 板 下 方 的 “添加 图 层 蒙 版 ”按钮 回 ,为 图 层 1 
添加 一 个 蒙 版 ,如 图 3-58 所 示 。 

(2) 按 D 键 ,恢复 默认 的 前 景色 /背景 色 为 黑 / 白 。 

(3) 选择 工具 栏 中 的 渐变 工具 国 , ,选择 黑色 到 白色 
EE] 可 本 1 

(4) 选中 “图 层 ” 面 板 中 的 图 层 1 蒙 版 缩 略 图 ,在 画 - 
布 上 从 金色 图 片 右 侧 拖 动 渐 变色 到 左 侧 ,为 图 层 1 添加 3-58 ”添加 图 层 蒙 版 
黑白 渐变 蒙 版 ,如 图 3-59 所 示 。 


3-59 ”添加 蒙 版 后 的 效果 
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(5) 使 用 文字 工具 按照 最 终 效 果 添 加 文字 ,如 图 3-60 所 示 。 


享受 网 购 乐趣 , 穴 在 


图 3-60 底部 Banner 最 终 效果 
(6) 将 文件 保存 为 index_end. psd, 并 另存 为 index_end. png。 


补充 说 明 
为 图 层 添加 蒙 版 后 ,“ 图 层 ” 面 板 呈 现 如 图 3-61 所 示 的 状态 。 左 侧 是 图 层 缩 略图 , 右 


侧 是 莹 版 缩 略图 。 


te TT 
(1) 蒙 版 的 移动 。 选 中 蒙 版 缩 略 图 或 者 图 层 缩 略图 | 正 富 | 不适 明度 :100% 加 
使 用 移动 工具 ,就 可 以 改变 其 位 置 , 形 成 不 同 的 效果 。 。 二 口中 全 be 


(2) 蒙 版 的 链接 。 在 图 层 缩 略图 和 和 蒙 版 缩 略图 中 间 dl 


若 有 图 按钮 ,表示 图 层 和 和 蒙 版 链接 了 ,对 图 层 移动 或 缩 
放 时 蒙 版 也 会 移动 缩放 。 如 果 需 要 取消 它们 之 间 的 链 
接 , 只 要 再 次 单 击 “链接 ”按钮 , 即 可 让 其 消失 。 

(3) 蒙 版 的 停 用 。 要 想 停 用 蒙 版 效果 ,只 要 右 击 蒙 版 缩 略 图 ,选择 “ 停 用 图 层 蒙 版 ” 命 
令 , 蒙 版 缩 略 图 上 会 出 现 一 个 红 又 。 如 果 要 重新 使 用 蒙 版 ,只 要 右 击 蒙 版 缩 略 图 ,选择 “ 启 
用 图 层 蒙 版 ”命令 即 可 ,如 图 3-62 所 示 。 


图 3-61 图 层 和 蒙 版 缩 略 图 


3 


添加 莹 版 到 法 区 添加 莹 版 到 选区 
从 这 区 中 沽 去 莹 版 从 区 中 减 去 莹 版 
莹 版 与 渴 区 交叉 蒙 版 与 选区 交叉 
莹 上 和 项 有. 


3-62 蒙 版 的 停 用 和 启用 


(4) 蒙 版 的 删除 。 要 想 删 除 蒙 版 效果 ,只 要 右 击 蒙 版 缩 略 图 ,选择 “删除 图 层 蒙 版 " 命 
令 即 可 ,如 图 3-63 所 示 。 


注意 : 

(1) 将 背景 图 层 转 为 普通 图 层 是 因为 背景 图 层 不 能 应 用 蒙 版 。 

(2) 在 蒙 版 上 操作 ,不 会 对 图 片 造成 一 点 破坏 ; 而 使 用 橡皮 擦 工具 ,会 将 图 片 的 像素 
擦 掉 ( 删 除 ) 了 。 因 此 ,在 蒙 版 上 如 果 做 得 不 满意 , 删 掉 蒙 版 就 行 了 ,不 会 对 图 片 有 任何 
影响 。 
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图 3-63 删除 图 层 蒙 版 和 效果 


34 任务 拓展 


本 任务 重点 学 习 了 使 用 Photoshop 软件 进行 “叮当 网 上 书店 ?图 片 素材 制作 的 相关 知 
识 和 技能 。 读 者 可 以 掌握 一 些 常 用 的 图 像 处理 方 法 。 下 面 独立 完成 以 下 相关 效果 ,从 而 
能 够 熟练 掌握 本 任务 的 相关 知识 和 技能 。 

(1) 制作 “收藏 "按钮 ,效果 为 . 

(2) 制作 鼠标 悬 停 在 “高 级 搜索 ”按钮 上 时 的 背景 图 片 ,效果 为 

(3) 制作 “搜索 ”按钮 ,效果 为 [El. 

(4) 制作 鼠标 悬 停 在 “导航 按钮 上 时 的 背景 图 片 ( 注 意 渐 变色 的 变化 ) ,效果 分 别 为 


35 任务 小 结 


通过 本 任务 的 学 习 和 实践 , Bill 了 解 和 掌握 了 使 用 Photoshop 软件 完成 网 站 所 需 图 
片 素 材 的 制作 。 网 站 图 片 素材 的 样式 很 多 ,制作 方法 也 很 多 样 ,这 还 需要 读者 在 今后 的 实 
践 过 程 中 不 断 学 习 和 掌握 。 在 制作 网 站 图 片 的 过 程 中 ,不 仅 要 紧 贴 网 站 设计 稿 的 要 求 , 还 
要 尽 可 能 考虑 网 页 制作 的 可 行 性 ,这 样 制作 出 来 的 图 片 素材 才 更 能 满足 网 页 制作 的 需要 。 


36 能 力 评 估 


. 什么 是 位 图 ? 它 与 矢量 图 有 什么 区 别 ? 

. 简 述 图 层 的 特点 。 它 与 像素 和 图 像 的 关系 是 什么 ? 

. 图 像 常 用 的 颜色 模式 有 哪 几 种 ? 

. 三 基色 是 指 哪 三 种 颜色 ? 图 像 中 的 颜色 值 分 别 有 哪 两 种 表示 方式 ? 
.网 页 中 能 支持 的 图 像 格 式 有 哪些 ? 

. 简 述 蒙 版 的 作用 和 原理 。 


中 上 


50 


网 站 的 结构 典 设 


任务 4 “ 杀 当 网 上 书店 "项目 建站 


通过 前 期 的 准备 ,Bill 已 经 将 “叮当 网 上 书店 ”的 整体 规划 和 所 用 素材 等 资料 完成 。 
接 下 来 Bill 就 要 开始 带领 大 家 进行 整个 网 站 的 制作 了 。 就 如 同 造 房子 打 地 基 一 样 ,首先 
我 们 必须 掌握 网 站 搭建 的 第 一 步 一 一 建站 ,同时 还 要 掌握 一 门 搭建 结构 的 语言 一 - 
XHTML。 

人 学 习 目标 

(1) 理解 Dreamweaver CS6 的 工作 环境 。 

(2) 理解 XHTML 的 文件 结构 及 编码 规范 。 

(3) 掌握 head 标签 的 应 用 。 

(4) 掌握 建站 的 步骤 和 方法 。 


41 任务 描述 


(1) 学 习 XHTML 语法 及 文件 结构 。 
(2) 完成 “叮当 网 上 书店 ”项 目 建站 及 首页 的 创建 。 


42 相关 知识 


4.2.1 Dreamweaver CS6 工作 环境 


Dreamweaver CS6 是 Adobe 公司 推出 的 一 套 拥有 可 视 化 编辑 界面 ,用 于 制作 并 编辑 
网 站 和 移动 应 用 程序 的 网 页 设计 软件 。Dreamweaver CS6 是 一 个 “所 见 即 所 得 ”的 网 页 
编辑 器 , 它 集 网 页 设计 、 网 站 开发 和 站 点 管理 功能 于 一 身 . 具 有 可 视 化 、 支 持 多 平台 和 跨 浏 
览 器 的 特性 。 

启动 Dreamweaver CS6 ,出 现 如 图 4-1 所 示 的 对 话 框 。 在“ 新建 ” 栏 中 选择 HTML， 
进入 Dreamweaver CS6 的 标准 工作 界面 ,如 图 4-2 所 示 。 

从 图 4-2 可 以 看 出 , Dreamweaver CS6 的 标准 工作 界面 包括 应 用 程序 工具 栏 、 更 改 
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文件 中 


编辑 (E] 查看 思 插入 (1D) 修改 明 格式 (四 ”命令 站 点 G) 
帘 用 | 机 网， 表亲 | 戎 纸 Spyy juer7 Wohile InContezt Editing 文本 | 虱 若 实 


打开 最 近 的 项 目 奢 建 主要 功能 

打开 时 HTML 请 | C56 新 增 功 能 概述 
号 colFusion = 
php 品 流体 网 格 布局 
受 css 加 上 Business Catalyst Bt 
四 和 ee 和 加 有 | Css 过 波光 果 面板 
xML EE 
志 流体 网 格 布局 园 | Rwry Mobie 色 板 
遍 Dreamweaver 站 点 下 
高 Business Catalyst 站 点 2 多 
回 更 多 局 更 多 

回 医 二 AITw 

DD 新 增 功 能 > 

回 资源 

国 Dreanweaver Exhanee > 

LL 不 再 显示 

图 4-1 ”Dreamweaver CS6 启动 界面 
Dw m d» 品 " S 


短 秽 


窗口 OD 帮助 内 


四 加 


Wntitled| x 


代码 || 拆 分 | 设计 | 实时 视图 


@. WM. to EL 


| Adobe BrowserLab 医 


Css 拌 式 
| | 应 用 程序 a 3 -一 ED 
[ 具 栏 菜单 栏 文档 插入 面板 = 
i 
文档 窗口 5 
浮动 面板 组 
标签 选择 器 属性 面板 人 
田 - 旺 ”我 的 电脑 
四 - 蝎 同上 久居 
田 -局 点 面 项 目 
od DEE I 654 x 438~ 1 KE/1 黎 Unicode (WTF-8) 
[<> ym] ”格式 外 | 无 ~ 闭 | 元 
Bcss 2D | 无 链接) 


图 4-2 Dreamweaver CS6 标准 工作 界面 


任务 4 “叮当 网 上 书店 ”项 目 建站 
工作 区 布局 下 拉 菜 单 .菜单 栏 . 插 入 面板 ,文档 工具 栏 ` 标 签 选择 器 文档 窗口 ,状态 栏 、 属 
性 面板 和 浮动 面板 组 。 
(1) 应 用 程序 工具 栏 。 在 Adobe Dreamweaver CS6 的 窗口 标题 栏 上 整合 了 网 页 制 
作 中 最 常用 的 命令 ,如 建站 ,设置 不 同 的 视图 显示 方式 等 ,如 图 4-3 所 示 。 


Dw ml td &" su- | lo! x | 


4-3 ”应 用 程序 工具 栏 


(2) 更 改 工作 区 布局 下 拉 菜 单 。 如 图 4-4 所 示 , 工 作 区 布局 分 为 经 典 、 编 码 器 、 编 码 
人 员 ( 高 级 ) 、 设 计 器 、 双 重 屏幕 流体 布局 ,移动 应 用 程序 等 。 


LE 到 本 | 
应 用 程序 开发 人 员 
应 用 程序 开发 人 员 ( 高 级 ) 
Business Catalyst 

v 经 典 


设计 器 

设计 人 员 ( 紧 病 ? 
观 重 屏幕 

流体 布局 
移动 应 用 程序 


重 置 ' 经 典 ' (E) 
新 建 工作 区 0D).. 
管理 工作 区 史 ).. 


4-4 设置 不 同 工 作 区 布局 


(3) 菜单 栏 。Dreamweaver CS6 的 菜单 共有 10 个 ,如 图 4-5 所 示 , 即 文件 ,编辑 、 查 
看 插入、 修改 格式、 命令 .站 点 .窗口 和 帮助 。 


文件 四 ”编辑 (GE ”查看 WD 插入 (DD 修改 仙 格式 四 命令) 站 点 (8) 窗口 晤 。 寻 助 
图 4-5 菜单 栏 


文件 : 用 来 管理 文件 ,如 新 建 . 打 开 、 保 存 . 另 存 为 导 和 人 、 输 出 打印 等 。 

编辑 : 用 来 编辑 文本 ,如 剪 切 复制 .粘贴 查找、 替换 和 参数 设置 等 。 

查看 : 用 来 切换 视图 模式 以 及 显示 /隐藏 标尺 、 网 格 线 等 辅助 视图 。 

插入 : 用 来 插入 各 种 元 素 ,如 图 片 、 多 媒体 组 件 、 表 格 、 框 架 及 超 链 接 等 。 

修改 : 具有 对 页 面 元 素 修改 的 功能 ,如 在 表格 中 插入 表格 、 拆 分 /合并 单元 格 、 对 齐 对 
象 等 。 

格式 : 用 来 对 文本 段落 操作 ,如 设置 文本 格式 等 。 

命令 : 所 有 的 附加 命令 项 。 

站 点 : 用 来 创建 和 管理 站 点 。 

窗口 : 用 来 显示 /隐藏 控制 面板 以 及 切换 文档 窗口 。 

帮助 : 提供 联机 帮助 。 按 Fl 键 ,就 会 打开 电子 帮助 文本 。 
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提示 : 编辑 菜单 提供 了 对 Dreamweaver 菜单 中 “首选 参数 ”的 访问 。 如 显示 起 始 页 ， 
开启 代码 提示 等 。 

(4) 插入 面板 。 插 入 面板 集成 了 所 有 可 以 在 网 页 应 用 的 对 象 ,包括 “插入 ”菜单 中 的 
选项 。 插 和 人 面板 其 实 就 是 图 像 化 了 的 插入 指令 ,通过 一 个 个 的 按钮 ,可 以 很 容易 地 加 入 图 
像 、 声 音 、 多 媒体 动画 、 表 格 、 图 层 \ 框 架 、 表 单 、Flash 和 ActiveX 等 网 页 元 素 , 如 图 4-6 所 示 。 


ET 
i@ 日 多 柱 | 国 昌国 - 名- 瘦 辣 凤 加 由- -| 加- 园 


图 4-6 插入 面板 
(5) 文档 工具 栏 。 文 档 工 具 栏 包含 各 种 按钮 ,它们 提供 各 种 文档 窗口 视图 (如 设计 视 


图 和 代码 视图 ) 的 选项 、 各 种 查看 选项 和 一 些 常 用 操作 (如 在 浏览 器 中 预览 ), 如 
图 4-7 所 示 。 


Untitled-l# x 
i 


| 设计 ] 


I 国 | 蚁 . 因由 DB C 本 | 
图 4-7 文档 工具 栏 


(6) 文档 窗口 。 打 开 或 创建 一 个 项 目 , 进 入 文档 窗口 ,可 以 在 文档 区 域 中 进行 输入 文 
字 、 插 和 人 表格 和 编辑 图 片 等 操作 。 

(7) 状态 栏 。 文 档 窗口 底部 的 状态 栏 提供 正 创建 的 文档 有 关 的 其 他 信息 。 标 签 选择 
器 显示 环绕 当前 选 定 内 容 标 签 的 层次 结构 。 单 击 该 层次 结构 中 的 任何 标签 可 以 选择 该 标 
签 及 其 全 部 内 容 。 例 如 , 单 击 二 body 二 可 以 选择 文档 的 整个 正文 ,如 图 4-8 所 示 。 


分 辩 率 真 传送 速度 ”编码 方式 


标签 选择 器 
Goody] [本 Qiox ~- 回 同 国 | 654 x 436v 1K/1 直 Unicode (IF-6) 
图 4-8 状态 栏 
(8) 属性 面板 。 属 性 面板 并 不 是 将 所 有 的 属性 加 载 在 面板 上 ,而 是 根据 用 户 选 择 的 
对 象 来 动态 显示 对 象 的 属性 。 属 性 面板 的 状态 完全 是 随 当前 在 文档 中 选择 的 对 象 来 确定 


的 。 例 如 ,当前 选择 了 一 幅 图 像 ,那么 属性 面板 上 就 出 现 该 图 像 的 相关 属性 ; 如 果 选 择 了 
表格 ,那么 属性 面板 会 相应 地 显示 成 表格 的 相关 属性 ,如 图 4-9 所 示 。 


| 《> mmL| ”格式 名 无 名 类 | 无 v BI 注 注 丝 些 标题 C) 
有 css TD) 无 ~ 链接 Q) J 多 已 。 上 四 
列表 项 目 
图 4-9 属性 面板 


(9) 浮动 面板 组 。 其 他 面板 可 以 统称 为 浮动 面板 ,这 些 面 板 都 浮动 于 编辑 窗口 之 外 。 这 
些 面板 根据 功能 被 分 成 了 若干 组 。 在 窗口 菜单 中 ,选择 不 同 的 命令 可 以 打开 不 同 的 面板 组 。 
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4.2.2 什么 是 XHTML 


(1) XHTML 指 可 扩展 超 文本 置 标语 言 (eXtensible HyperText Mark-up Language) 。 

(2) XHTML 的 目标 是 取代 HTML。 

(3) XHTML 与 HTML 4. 01 几乎 是 相同 的 。 

(4) XHTML 是 更 严格 .更 纯净 的 HTML 版 本 。 

(5) XHTML 是 作为 一 种 XML 应 用 被 重新 定义 的 HTML。 

(6) XHTML 是 一 个 W3C 标准 。 

今天 的 市 场 中 存在 着 不 同 的 浏览 器 ,一 些 浏览 器 运行 在 计算 机 中 ,一 些 浏览 器 则 运行 
在 移动 电话 和 手持 设备 上 。 而 后 者 没有 能 力 和 手段 来 解释 复杂 的 置 标语 言 。XHTML 
可 以 被 所 有 的 支持 XML 的 设备 读 取 , 同 时 在 其 余 的 浏览 器 升级 至 支持 XML 之 前 ， 
XHTML 使 用 户 有 能 力 编写 出 拥有 和 良好 结构 的 文档 ,这 些 文档 可 以 很 好 地 工作 于 所 有 的 
浏览 器 ,并且 可 以 向 后 兼容 。 


4.2.3 XHTML 文件 结构 


XHTML 文件 结构 如 下 所 示 ,由 3 部 分 组 成 : 声明 (DOCTYPE) .文档 头 部 (head) 和 
文档 主体 (body)。 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

html xmlns = "http://www. w3.org/1999/xhtml" > 

<head> 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
二 title 二 无 标题 文档 过 /title 

</head> 

<body> 


一 [body 二 
/himl> 


(1) 声明 ; 主要 对 文档 所 遵循 的 标准 进行 说 明 , 具 体 详 见 4.2.4 小 节 。 

(2) 文档 头 部 : 二 head 之 .二 /head 记 标签 之 间 的 部 分 。 这 部 分 内 容 主要 用 来 定义 文 
档 的 相关 信息 ,如 文档 标题 .说明 信息 ,样式 定义 、 脚 本 代码 等 。 书 写 在 头 部 的 信息 是 不 会 
显示 在 页 面 中 。 具 体 详 见 4.2.6 小节。 

(3) 文档 主体 : 标签 body>... 一 /body> 之 间 的 部 分 。 这 部 分 内 容 就 是 要 展示 给 
用 户 的 部 分 。 它 可 以 包含 文本 、 图 片 音频 、 视 频 等 各 种 内 容 。 

注意 : 文档 头 部 和 文档 主体 全 部 由 二 html 这 和 二 /html 之 标签 国 住 。 二 html 之 标签 
告诉 浏览 器 网 页 文件 的 开始 和 结束 。 

57 


EE 前 端 开发 项 目 化 教程 


4.2.4 DTD 文件 


在 XHTML 结构 的 声明 部 分 ,二 ! DOCTYPE 之 定义 了 文档 使 用 的 DTD 版 本 、 类 
型 下载 位 置 等 。 如 图 4-9 中 定义 了 文档 使 用 的 语言 版 本 是 XHTML 1.0。 文档 类 型 是 
Transitional。DTD 下 载 地 址 是 http://www. w3. org/TR/xhtmll/DTD/xhtmll- 
Transitional. dtd。 

XHTML 1.0 提供 了 3 种 DTD 类 型 可 供 选 择 。 

(1) Transitional: 过 渡 类 型 ,允许 继续 使 用 HTML 4. 01 中 已 作废 的 标签 和 属性 ,但 
要 符合 XHTML 的 写法 。 


ldoctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 


(2) Strict: 严格 类 型 ,用 户 必须 严格 遵守 XHTML 规范 ,不 再 支持 已 作废 的 标签 和 
属性 。 


ldoctype html public "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-strict. dtd"> 


(3) Frameset: 框架 集 类 型 ,如 果 页 面 中 包含 有 框架 ,需要 采用 这 种 DTD。 


所 !doctype html public "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-frameset. dtd"> 


提示 : 初学 者 可 以 使 用 Transitional 型 的 文档 , 它 的 限制 较 少 ,但 推荐 使 用 Strict 型 
的 文档 ,这 有 助 于 养 成 良好 的 习惯 ,为 制作 规范 的 网 页 打 好 基础 。 


4.2.5 XHTML 编码 规则 


1. 标签 


标签 是 HTML 的 基本 元 素 , 它 用 来 控制 内 容 的 格式 、 功 能 .效果 等 。 标 签 有 单 标签 
和 双 标 签 两 种 格式 。 

(1) 单 标签 : 二 x /二 

单 标 签 没 有 结束 标签 ,但 必须 用 “/" 把 它 关 闭 。 如 过 br /二 、<img /二 等 标签 是 这 种 
形式 的 标签 。 

(2) 双 标 签 : 二 x...=/x 二 

双 标 签 写 法 包含 起 始 标签 和 结束 标签 ,其 控制 的 内 容 写 在 中 间 。 如 过 html 二 .… 
< 一 /html>、 一 head 盖 .一 /head 盖 、 一 body>... 一 /body 二 等 都 是 这 种 形式 的 标签 。 
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2. 属性 


在 标签 中 可 定义 若干 属性 ,它们 指定 了 该 标签 的 参数 值 例如 ,二 img src 一 
"dingdang. png” width 一 "60" height 二 "35" /请 中 ,img 是 标签 名 ,src、width、height 是 属 
性 名 光一” 后 面 是 属性 值 。 

属性 书写 在 标签 中 ,可 以 有 多 个 ,各 属性 间 用 空格 隔 开 。 


3. 编码 规范 


(1) XHTML 标签 必须 关闭 。 

(2) 标签 名 和 属性 名 必须 用 小 写 。 

(3) 属性 值 必须 加 引号 ,各 属性 值 的 引号 不 能 省 略 。 如 果 属 性 值 内 部 需要 引号 ,可 以 
改 为 单 引号 进行 分 界 ( 注 : 也 可 以 外 面 用 单 引号 ,内 部 用 双 引 号 )。 例 如 : 


<img src= "dingdang. png" width= "60" onclick= "setImg( 't. gif)" /> 


4. 标签 可 以 嵌 套 ,但 必须 正确 嵌 套 


例如 ,<b><<i>>…</i 盖 </b> 是 正确 的 嵌 套 ;: 二 bi 这 ... 二 /b 二 </i 过 是 错 
误 的 。 


说 明 出 于 兼容 性 考虑 ,如 果 没有 遵循 以 上 规范 ,在 有 些 浏览 器 中 也 能 得 到 正常 的 显 
示 效 果 , 但 在 未 来 的 浏览 器 中 可 能 不 会 正常 显示 。 建 议 要 养 成 良好 的 书写 习惯 。 


5. 注释 


在 XHTML 文档 中 可 以 添加 注释 文本 ,浏览 器 在 显示 网 页 时 ,不 会 显示 注释 的 文本 。 
注释 文本 的 定义 格式 如 下 : 


二 !-- 注 释文 本 -> 


即 注释 内 容 应 该 书写 在 “二 ! --" 和 “-- 二 "之 间 , 其 中 注释 内 容 可 以 写 多 行 。 


4.2.6 头 部 标签 head 

去 head> 标 签 用 于 定义 文档 的 头 部 , 它 是 所 有 头 部 元 素 的 容器 。head 中 可 包含 
meta \title link style script 等 常用 标签 。 

1. 标题 标签 title 


标题 标签 title 是 双 标 签 , 用 于 说 明 最 常用 的 head 信息 。 它 不 显示 在 HTML 网 页 正 
文 里 ,显示 在 浏览 器 窗口 的 标题 栏 里 ,如 图 4-10 所 示 。 
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淖 叮 当 网 上 书店 - micerosoeft Internet Explorer 
文件 FE) ”编辑 下 ) 查看 WW 收藏 和 工具 CX) 大助 0 
古 - 昌 -中 加 多 | 有 里 次 二 加 | 从 - 千 : 辐 -Lj 区 汶 


4-10 title 标题 效果 


示例 代码 如 下 : 


二 head 之 title 二 叮当 网 上 书店 </title></head 二 


2. 链接 标签 link 


链接 标签 link 是 单 标签 ,一 般 用 于 网 页 链接 外 部 样式 表 文件 。 属 性 值 含义 如 下 。 
(1) href: 指定 需要 加 载 的 资源 (CSS 文件 ) 的 地 址 URL。 

(2) media: 媒体 类 型 。 

(3) rel: 指定 链接 类 型 。 

(4) rev: 指定 链接 类 型 。 

(5) title: 指定 元 素 名 称 。 

(6) type: 包含 内 容 的 类 型 ,一 般 使 用 type 二 "text/css"。 

示例 代码 如 下 : 


<head> <link rel= "stylesheet" href="index.css" type= "text/css"/></head> 


3. 样式 style 


样式 标签 style 是 双 标签 ,用 于 设置 网 页 的 内 部 样式 表 。 
示例 代码 如 下 : 


<head> 

<~style> 
body {background-color: white; color:black;} 
p {font: 12px arial bold;} 

</style> 

</head> 


4. 网 页 信息 标签 meta 


meta 标签 是 单 标签 ,可 提供 有 关 页 面 的 元 信息 (meta-information) ,比如 针对 搜索 引 
擎 和 更 新 频 度 的 描述 和 关键 词 。 
(1) 用 来 标记 搜索 引擎 在 搜索 你 的 页 面 时 所 取出 的 关键 词 ,例如 : 


二 meta name 一 "keywords" content 一 "叮当 网 ,图 书 ,电子 商务 " /二 
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(2) 用 来 标记 文档 的 作者 ,例如 : 


二 meta name 王 "author" content 二 " 张 三 " /> 


(3) 用 来 标记 页 面 的 解码 方式 ,例如 : 


meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 


其 中 ,http-equiv 二 "Content-Type"” content 二 "text/html" 告 诉 浏览 器 准备 接收 一 个 
HTML 文档 。UTF-8 是 国际 通用 标准 编码 (包括 世界 所 有 的 语言 ) ,而 GB2312 是 简体 中 
文 编码 (只 包括 简体 中 文 );。 为 防止 网 页 浏览 出 现 乱 码 的 问题 ,行业 内 网 页 设计 时 一 般 都 
采用 UTF-8 格式 。Dreamweaver CS6 在 默认 情况 下 ,新 建 的 网 页 都 是 以 UTF-8 进行 编 
码 的 ,如 果 采 用 低 版 本 的 Dreamweaver 时 ,一 定 要 先 在 “首选 参数 ”对 话 框 的 “新 建文 档 ” 
选项 中 修改 编码 格式 为 UTF-8。 因 为 在 Web 2.0 标准 时 代 , 页 面 的 编码 都 采用 国际 统一 
标准 编码 格式 一 一 UTF-8。 

(4) 用 来 自动 刷新 网 页 ,是 可 选项 ,例如 : 


meta http-equiv= "refresh" content="3;URL=http://www. sina.com.cn" /> 


以 上 代码 表示 3 秒 钟 后 自动 刷新 为 新 浪 网 站 。 
5. 脚本 标签 script 


脚本 标签 是 双 标签 ,用 于 定义 客户 端 脚本 ,如 JavaScript。 该 标签 有 以 下 两 个 属性 。 
(1) src: 指定 需要 加 载 的 脚本 文件 (如 JavaScript 文件 ) 的 地 址 URL。 

(2) type: 指定 媒体 类 型 (如 type 一 "text/javascript") 。 

示例 代码 如 下 : 

<head> 


script type= "text/javascript" src="dreamdu.js"></script> 
</head> 


43 任务 实现 


4.3.1 “叮当 网 上 书店 ?项目 建站 


1. 设立 文件 夹 
(1) 在 DD 盘 新 建文 件 夹 ,以 网 站 名 命名 (注意 ,名 称 只 能 是 英文 字母 ) ,例如 本 例 命名 
为 dingdang。 
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(2) 在 dingdang 站 点 文件 夹 内 再 新 建 4 个 子 文件 夹 , 分 别 命名 为 images( 用 于 存放 
网 页 上 的 所 有 图 片 ) .flash (用 于 存放 SWF 格式 的 动画 文件 ) .css( 用 于 存放 CSS 样式 文 
件 ) js( 用 于 存放 JavaScript 文件 )。 结 构 如 图 4-11 所 示 。 


2. 打开 Dreamweaver CS6 建立 站 点 


(1) 打开 Dreamweaver CS6 ,选择 “站 点 ”|“ 新 建站 点 ”选项 ,如 图 4-12 所 示 。 
证 口 人 帮助 国 ” 意 " 


新 建站 点 加 ). . 


新 建 Business Te 站 点 角 )... 
管理 站 点 0) 
+ 
HALt+Shi ft 
报告 四) 
站 点 特定 的 代码 提示 G) 
Es) 检查 站 点 范围 的 链接 电 ) Ctrl+F8 
«ss 改变 站 点 范围 的 链接 &).. . 
加 ah 高 级 ) 所 
下 PhoneGsp Build 服务 » 
图 4-11 创建 站 点 文件 夹 结构 4-12 新 建站 点 


(2) 进入 “新 建站 点 ”对 话 框 ,在 左边 选择 “站 点 ”标签 ,在 右边 输入 站 点 名 称 
dingdang, 在 “本 地 站 点 文件 夹 ”选项 中 选择 站 点 路 径 , 如 图 4-13 所 示 。 
(3) 单 击 “ 保 存 ” 按 钮 ,这 时 候 站 点 已 经 建 好 了 ,在 右边 会 出 现 如 图 4-14 所 示 的 目录 。 


站 点 设置 对 象 dingdang 
mweaver 站 点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 Drear 


路 庆 半 党 作风 人 各 分: 名 在 革 中 存储 和 处 理 文件 的 计生 机 | 的 宁 好 们 队 ” 
夹 ， 以 及 可 在 其 中 将 相同 文件 发 布 到 Web 上 的 服务 器 上 的 远程 文件 夹 . 


您 可 以 在 此 处 为 Dreamweaver 站 点 选择 本 地 文件 来 和 名 称 - 
站 点 名 称 : [ dnodang 
本 地 站 点 文件 夹 : [D:\dnodang\ 


[加 dinedtane 司 | 本 视图 辐 
AQG|3DSBB 


日 加 站 点 - dingdang :vd 


4-13 设置 “新 建站 点 ”对话 框 图 4-14 站 点 目录 结构 
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4.3.2 “叮当 网 上 书店 ?新 建 首页 


(1) 在 图 4-15 空白 处 右 击 ,选择 “新 建文 件 ” 选 项 ,如 图 4-16 所 示 , 输 入 首页 名 index. 
html (首页 一 般 命 名 为 index. html) ,如 图 4-16 所 示 , 按 Enter 键 确定 。 


证 文件 所 
轧 dinedane 。” 同 | 本 视图 可 
和 Cl 人 内 名 | 恒 
日 同 站 点 - dingdang 加: dingds 
由 -加 flash 
由 - 回 inages 


医 EEE 


日 加 站 点 - dingdang O:Ad - 
产 建 文件 夹 ER) 田 -加 css 
打开 中 ) 田 - 国 Qh 
打开 方式 中 和 
编辑 E) 田 - 包 js 
选择 G@) 四 index. htnl 
4-15 新 建文 件 图 4-16 创建 首页 index. html 


(2) 双击 文件 名 称 index. html, 在 左边 文档 区 域 就 呈现 出 首页 (index. html) 的 代码 
视图 ,如 图 4-17 所 示 ,编辑 视图 分 为 代码 视图 . 拆 分 视图 .设计 视图 .实时 视图 4 种 。 

相关 链接 

代码 视图 的 作用 是 只 显示 网 页 代码 ,设计 视图 的 作用 是 只 显示 页 面 效果 , 拆 分 视图 的 
作用 是 同时 显示 网 页 代码 和 页 面 效 果 , 实 时 视图 的 作用 是 显示 页 面 在 浏览 器 中 看 到 的 
效果 。 

提示 : 网 站 是 所 有 相关 资源 的 统称 。 网 页 是 指 网 站 里 的 页 面 。 主 页 是 指 网 站 的 首 
页 ,一 般 命名 为 index. html 或 default. html。 


DW 国 ” 交 ” BB 


文件 四 ”编辑 (了 查看 (和 插入 (DD) 修改 妈 ”格式 (0) 命令 (CD 站 点 (G) 窗口 响 帮助 0 
帘 用 ez 


| 站 回 昌 圳 | 国 因 加- 在- 烛 辣 骨 办 + 2- | 国 - 加 


index, html x 


实时 视图 哆 .加 . 内 b% 后 4 标题 ， 殉 标本 文档 


!DOCTYPE html PUBLIC "-//W3C//DTD XHTNL 1.0 Transitional//EN" 
"http:// wy.w3.org/TR/xhtml1/DTD/xhtml1l-transitional.dtd"> 
<html xmlns="http://wow.v3.org/1999/xhtml"> 
<head> 


<meta http-equiv="Content-Type” content="text/html; charset=utf-8" /> 
<title> 无 标题 文档 </title> 
</head> 


<body> 
</hody> 
</html> 


4-17 代码 视图 
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44 任务 拓展 


4.4.1 SEO 一 一 让 你 的 网 站 排名 靠 前 


SEO(CSearch Engine Optimization ,搜索 引擎 优化 ) 是 一 种 利用 搜索 引擎 的 搜索 规则 
来 提高 网 站 在 有 关 搜 索引 擎 内 排名 的 方式 。 如 图 4-18 所 示 ,页 面 中 “百度 快照 ”? 即 为 通过 
SEO 手段 优先 排 在 网 页 的 前 几 名 。 那 么 如 何 实现 SEO 呢 ? 其 中 一 种 方法 是 借助 于 网 站 
的 Head 区 的 设置 进行 。 


而 而 
 ) 
ai 人 全 百度 新闻 网 页 Ma 知道 音乐 图 片 视频 地 图 文库 更 多 » 
叮当 网 百度 一 下 


罗网 上 购书 网 站 全 场 2 折 起 100% 正 品 . 货 到 付款 www dangdang com Y 推广 链接 
当 网 全 场 2 折 起 精品 低 价 , 清 额 免 运费 图 书 百货 2 折 起 .13 年 品质 保证 ,100% 正 品 


当 网 上 书店 图 书 试用 网 www jilucking.com 


了 当 网 上 书店 就 是 常 说 的 当当 网 上 书店 .是 国内 最 大 的 中 文 网 上 书店 之 一 。 今 天 小 编 为 大 介绍 几 
热卖 新 书 《卑鄙 的 圣人 -曹操 》 作者 王 晓 舌 .2 
ww ilucking comydangdangwangshangsh 2013.6-14 - 百度 快 昭 


图 4-18 百度 搜索 结果 页 面 


4.4.2 head 三 标签 SEO 


由 于 搜索 引擎 首先 抓 取 的 是 网 站 头 部 ,接着 才 是 网 站 的 正文 部 分 ,所 以 我 们 可 以 直接 
在 head 标签 中 进行 相应 的 优化 设置 ,达到 排名 优先 的 效果 。 所 谓 head 三 标签 SEO , 指 的 
是 网 页 标题 (title) .关键 字 (keywords) ,描述 Cdescription)3 个 标签 针对 Google、Baidu 两 
大 主流 搜索 引擎 的 优化 。 


1. title 标签 


对 于 网 页 来 说 ,title 标签 犹如 一 个 人 的 名 字 那 样 至 关 重 要 。 对 页 面 进 行 优化 时 首先 
就 是 从 title 开始 。 在 SEO 中 ,title 的 重要 性 非常 高 ,把 它 放 在 description 与 keyword 之 
前 。 在 title 的 后 面 ,可 以 加 上 网 站 名 称 , 也 可 以 加 上 其 所 属 栏目 的 名 称 , 以 英文 逗号 分 
隔 , 或 以 空格 分 隔 , 或 用 单 竖 线 (| ) 分 隔 。 


2. keywords 标签 

在 网 页 中 ,keywords 标签 用 来 列 出 关键 词 ,犹如 一 个 人 的 个 性 。 虽 然 调查 显示 ,很 多 
搜索 引擎 已 经 不 太 重 视 keywords 标签 ,有 的 直接 忽略 ,但 是 就 笔者 经 验 来 说 ,也 未 必 完 
全 这 样 。 
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任务 4 “叮当 网 上 书店 ”项 目 建站 

很 多 网 页 设计 者 喜欢 在 keywords 上 做 手脚 ,关键 词 堆 了 一 大 堆 以 期 提高 搜索 命中 

率 。Google 大 概 是 “ 睁 一 只 眼 , 闭 一 只 眼 *, 不 过 也 可 能 是 它 真 的 已 不 重视 keywords; 而 

Baidu 并 不 这 样 , 它 会 直接 予以 “惩罚 ”"。 因 此 ,在 网 站 首页 、 栏 目 等 处 ,keywords 可 有 可 无 ; 
在 内 容 页 中 可 以 适当 写 几 个 ,控制 在 8 个 以 内 ,用 英文 逗号 隔 开 ; 另外 就 是 切忌 重复 用 词 。 


3。 description 标签 


description 是 对 一 个 网 页 的 简要 描述 ,犹如 一 个 人 的 简历 。description 应 当 言 简 意 
凡 , 控 制 在 150 个 字符 左右 。 因 为 过 多 的 话 , 抓 取 列 表 页 会 忽略 掉 。 

对 于 description ,谷歌 和 百度 都 较为 重视 。 有 一 个 小 宅 门 ,就 是 在 description 中 融合 
想 在 keywords 中 放置 的 关键 词 ,但 也 不 宜 过 度 堆 砌 。 另 外 ,描述 不 能 和 网 页 实际 内 容 明 
显 不 符 。 

图 4-19 为 叮当 网 优化 设置 。 大 家 也 可 以 自己 写 一 些 有 利于 推广 的 内 容 。 


Amera name="keywords”contenc=" 了 J 当 网 , 叮当 ， 网 上 购物 ， 专 业 图 书 ,网 上 商城 ， 网 上 了 买书， 在 战 购物 ” /> 
</head> 

<body> 

</body> 

</html> 


图 4-19 叮当 网 优化 设置 


45 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 已 经 了 解 和 掌握 了 网 站 制作 软件 Dreamweaver CS6 
的 基本 使 用 方法 ,明白 了 用 XHTML 语言 进行 网 页 结构 代码 编写 的 基本 方法 ; 并 完成 了 
叮当 网 的 建站 和 首页 的 设置 与 命名 ,对 SEO 中 网 页 头 部 的 优化 规则 有 了 一 定 的 了 解 。 


46 能 力 评 估 


. 什么 是 XHTML 语言 ? 简 述 XHTML 语言 结构 。 
. 简 述 XHTML 编码 规范 。 

. 简 述 建站 的 步骤 。 

. 简 述 网 站 、 网 页 ,主页 的 区 别 与 命名 规则 。 

. 简 述 对 SEO 优化 的 理解 。 


5 
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任务 5 人 钉 当 网 上 书店 ”页 面 框 架 结构 


通过 任务 4 的 实施 ,Bill 了 解 了 XHTML 语言 ,完成 了 “叮当 网 上 书店 ”项 目 站 点 的 建 
设 和 首页 的 建立 。 接 下 来 Bill 要 按照 设计 稿 自 上 至 下 分 步 实现 首页 和 购物 车 页 的 页 面 框 
架 结 构 ,通过 XHTML 语言 结构 的 学 习 和 技能 的 实践 ,确保 “叮当 网 上 书店 ”项 目的 按期 
完成 。 

> 学 习 目 标 

(1) 理解 掌握 div 标签 的 概念 和 使 用 DIV 布局 的 方法 。 

(2) 理解 掌握 span 标签 的 概念 和 使 用 方法 。 


51 任务 描述 


“叮当 网 上 书店 ”的 首页 和 购物 车 页 都 是 一 列 固定 宽度 居中 的 版 式 ,效果 如 图 5-1 和 
图 5-2 所 示 。 


EL Wome ees eee amaim 


享受 网 购 乐趣 ， 


正 受 稳 人 证 国生 一 站 式 
- 蜀 : 一 一 


图 5-1 首页 效果 图 


任务 5 “叮当 网 上 书店 ”页 面 框架 结构 


程 系 设计 。 Web 开 发。 元 据 库 管理 *mex 入 门 学 习 CE hs.NT SH Server | FEP DY ASP NET | SQL Server 


而 当 国 所 | : EE 划 | 光 有 家。 坎 雪 : 坟 扫 2 站 失 。 执 所 4 执 扫 s 执 执 s 执 扫 7 


过 我 的 购物 车 “多 好 的 品 : 


商品 号 商品 名 请 数量 操作 
两 品 全 晤 总 计 : ¥126.40 您 共 节省 ; ¥48.60 
国 20019134 五 月 信守 物 酒 559 二 79 拆 1 出 咒 | 人 
回 五 化 扳 应 池子 水 昌之 六 〈 话 明 红 ) 38.99- #93.00 67 折 1 出 味 | 4 
国 对 可 再 要 SP4 ¥20.40 75 折 1 节 除 | 人 ay 
回 石 代打 麻 和 台子 水 昌之 训 ( 括 明 江 ) 尖 38:89- #93.00 67 折 和 出 味 | 约克 
国 20019134 五 月 信 家 物 百 6759 13.00 79 折 1 他 让 | 全 
加 五 代打 廊 于 子 水 昌之 六 《iT) 因 38:99- X93.00 67 折 1 Ml | ft 
加 彼 或 开 于 可 3P4 X2040 75 折 1 他 号 | 从 5& 
回 五 代打 诡 习 于 水 晶 之 加 (58) 39:99- #93.00 67 折 1 好 路 | Er 
加 FE 324 ¥20.40 75 折 1 出 哺 | 人 
四 五 代打 廊 歌 子 水 最 之 《透明 红 ) 3338.99- #93.00 67 折 1 山中 | 4 
加 十 到 有 于 有 xy24 ¥20.40 75 折 1 出 陵 | 夫 & 
答 百 加 23.…49 30 量 E- 而 ;和 页 Go 


享受 网 购 乐趣 , 穴 在 


正品 将 保证 | 


Copyright = OT 2004-2009, All Rights Resarved. Poveres By Geersoft Corp. | 区 ZcriFosl100 且 


5-2 购物 车 页 效果 图 


从 效果 图 可 以 看 出 ,两 个 页 面 内 容 不 尽 相 同 ,但 都 是 上 中、 下 结构 一 一 头 部 、 主 体 
和 底部 。 根 据 网 站 风格 统一 的 原则 ,其 他 页 面 Logo、 导 航 菜单 模块 .快速 分 类 检索 模 
块 、 广 告 展 示 模 块 等 布局 保持 与 首页 相同 ,也 就 是 头 部 和 底部 的 框架 结构 在 网 站 中 是 
不 变 的 。 

本 任务 主要 通过 网 页 框架 结构 div 标签 代码 的 学 习 和 制作 ,实现 “叮当 网 上 书店 ” 首 
页 和 购物 车 页 的 页 面 框架 结构 。 


52 相关 知识 


完成 了 项 目 建站 和 新 建 网 页 任务 后 ,本 任务 引入 div 标签 和 span 标签 ,在 代码 视图 
中 (如 图 5-3 所 示 的 箭头 处 ) 输 入 XHTML 代码 ,完成 “叮当 网 上 书店 ”首页 和 购物 车 页 面 
框架 结构 。 
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图 5-3 ”Dreamweaver 代码 和 设计 的 拆 分 视图 


5.2.1 div 标签 


在 Web 2.0 时 代 , 网 页 设计 师 们 都 采用 流行 的 div 标签 来 进行 网 页 的 布局 设计 ,并 配 
以 CSS 样式 来 实现 网 页 的 最 终 效果 。DIV 是 用 来 为 HTML 文档 内 大 块 (Block-level) 的 
内 容 提供 结构 和 背景 的 元 素 , 简 单 地 说 是 一 个 区 块 容器 , 即 二 div 之 与 一 /div 之 之 间 相 当 于 
一 个 容器 ,可 以 容纳 段落 ,标题 表格 、 图 片 ,乃至 章节 ,摘要 和 备注 等 各 种 XHTML 元 素 。 
区 块 容器 有 两 大 特点 : 区 块 元 素 必须 独占 一 行 ,不 允许 本 行 的 后 面 再 有 其 他 内 容 ; 
加 区 块 容器 默认 情况 下 的 宽度 跟 它 父 级 标签 的 宽度 相同 。 因 此 ,可 以 把 和 div 之 与 二 /div 二 
中 的 内 容 视 为 一 个 独立 的 对 象 ,用 于 CSS 的 控制 。 在 div 标签 中 加 上 class 或 id 属性 可 
以 应 用 额外 的 样式 。 

不 必 为 每 一 个 div 标签 都 加 上 class 或 id 标签 ,虽然 这 样 做 也 有 一 定 的 好 处 。 可 以 在 
同一 个 div 标签 同时 应 用 class 和 id 属性 ,但 是 更 常见 的 情况 是 只 应 用 其 中 一 种 。 这 两 者 
的 主要 差异 是 ,class 用 于 元 素 组 (类 似 的 元 素 ,或 者 可 以 理解 为 某 一 类 元 素 ) ,而 id 用 于 
标识 单独 的 唯一 的 元 素 。 

div 标签 可 选 属性 如 表 5-1 所 示 。 

表 5-1 div 标签 可 选 属性 表 


属 性 描 述 可 用 值 
left 
i 规定 div 元 素 中 的 内 容 的 对 齐 方式 ,不 right 
赞成 使 用 。 应 使 用 样式 取而代之 center 
justify 
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5.2.2 span 标签 


span 标签 与 div 标签 一 样 ,作为 容器 标签 而 被 广泛 应 用 在 XHTML 语言 中 。span 标 
签 用 来 组 合 文档 中 的 行内 元 素 。 行 内 元 素 也 有 两 大 特点 ,刚好 跟 区 块 容 器 的 特点 相反 
名 行内 元 素 不 需要 独占 一 行 ,本 行 后 面 还 允许 有 其 他 的 内 容 ; @ 行 内 元 素 的 宽度 在 默认 
情况 下 跟 它 内 部 的 内 容 的 宽度 相同 。 在 过 span 之 和 志 /span 过 中间 同 样 可 以 容纳 各 种 
XHTML 元 素 。 

由 以 上 两 者 的 特点 不 难 发 现 Span 与 DIV 的 区 别 : DIV 是 一 个 块 级 (Block-level) 容 
器 , 它 包围 的 元 素 会 自动 换行 。 而 Span 仅 是 一 个 行内 容器 (Inline Elements) ,在 它 的 前 
后 不 会 换行 。Span 没有 固定 的 格式 表现 。 当 对 它 应 用 样式 时 , 它 才 会 产生 视觉 上 的 变 
化 。 此 外 ,span 标签 可 以 作为 子 元 素 包 含 于 div 标签 之 中 ,但 反之 不 成 立 , 即 span 标签 中 
不 可 包含 div 标签 。 


53 任务 实施 


“叮当 网 上 书店 ?首页 和 购物 车 页 面 XHTML 框架 结构 根据 任务 2 的 版 面 设计 稿 和 
最 终 效果 图 来 看 ,有 相同 之 处 ,都 是 一 列 固定 宽度 居中 的 版 式 , 分 为 头 部 .主体 和 底部 3 个 
部 分 ,但 是 主体 部 分 分 别 有 不 同 的 表现 ,如 图 5-4 和 图 5-5 所 示 。 


5-4 叮当 网 首页 基本 结构 
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图 5-5 “叮当 网 上 书店 ”购物 车 基本 结构 


5.3.1 “叮当 网 上 书店 ?首页 XHTML 框架 结构 


我 们 现在 要 做 的 就 是 首先 将 首页 页 面 分 块 ,用 DIV 作为 容器 存放 每 一 块 的 内 容 。 根 据 
任务 2 的 版 面 设计 稿 和 任务 3 的 效果 图 以 及 图 5-4, 整 体 分 为 头 部 .主体 部 分 .底部 3 块 。 

考虑 到 以 后 的 CSS 排版 要 求 ,直接 用 CSS 的 id 或 class 来 表示 各 个 块 ,如 首页 整体 
定义 为 container,id 为 井 container, 在 定义 为 间 container 的 DIV 容器 中 需要 构 套 3 块 内 
容 , 所 以 将 头 部 定义 为 header,id 则 为 # header, 将 这 个 DIV 容器 ( 头 部 模块 ) 作为 
并 container 容器 中 的 最 上 方 一 个 容器 进行 第 一 层 嵌 套 , 以 此 类 推 。 嵌 套 关 系 如 图 5-6 
所 示 。 


Hfooter 


图 5-6 首页 页 面 内 容 框架 (第 一 层 ) 
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根据 图 5-6 ,首页 是 4 个 DIV 容器 的 嵌 套 结构 。 
XHTML 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

html xmlns= "http://www.w3.org/1999/xhtml"> 

=head> 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

<<title> 叮 当 网 上 书店 二 /title> 

二 meta name 一 "keywords" content 二 "叮当 网 ,图 书 ,电子 商务 " /二 

二 meta name 一 "author" content 二 "作者 " /二 

<link href="css/style. css" rel="stylesheet" type= "text/css" /> 


=/head> 


=<body> 
二 !--container 一 列 开始 -- 二 
<div id= "container"> 


二!--header 头 部 开始 -- 二 
<div id="header"> 


</div> 
二 !--header 头 部 结束 -- 二 


二 !--main 主体 开始 -- 二 
<divid="main"> 


</div> 
二 !--main 主体 结束 -- 二 


二!--footer 底部 开始 -- 二 
<div id="footer"> 


</div> 


二!--footer 底部 结束 -- 二 
</div> 
二!--container 一 列 结束 -- 二 
</body> 
</html> 
根据 图 5-7 所 示 , 在 首页 的 头 部 、 主 体 部 分 和 底部 中 需要 继续 嵌 套 其 他 功能 模块 ,来 


放置 页 面 
所 述 , 要 天 


内 容 , 如 导航 和 分 类 模块 放 在 头 部 ,广告 位 展示 放 在 底部 ,其 他 放 在 主体 。 综 上 
整个 页 面 进行 第 二 层 嵌 套 , 也 就 是 定义 为 # container 的 DIV 容器 中 已 经 幅 套 


了 #header 的 DIV 容器 ,在 # header 的 DIV 容器 中 青竹 套 定义 为 . navlink 的 DIV 容器 
(Logo 及 导航 菜单 模块 ) ,以 此 类 推 。 嵌 套 关 系 如 图 5-8 所 示 。 


根据 


图 5-8 ,首页 是 再 将 7 个 DIV 容器 进行 嵌 套 的 结构 。 
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一 一 ”| Logo 及 导航 菜单 模块 


[一 一 | 快速 分 类 检索 模块 


[一 | 图 书 分 类 模块 


首 [一 一 | 品牌 出 版 社 提 


l 行 模块 


功 [| 图 书 点 击 排行 Top10 模 块 


模 [一 | 主编 推荐 图 


$B 模块 


六 一定 本 月 最 新 图 


模块 


六 一定 本 周 热 销 图 


;模块 


[一 一 | 用 户 快速 登录 、 注 册 模块 


一 一 | 广告 位 展示 模块 


图 5-7 首页 功能 模 


#container 


块 图 


#header 


.navlink 


. search 


#main 


“main_left Main_center 


nain_right 


#footer 


. footer_banner 


. footer_bottom 


图 5-8 首页 页 面 内 容 框架 (第 二 层 ) 


任务 5 “叮当 网 上 书店 ”页 面 框 


XHTML 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 


w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<title> 叮 当 网 上 书店 一 /title> 

二 meta name 一 "keywords" content 一 "叮当 网 ,图 书 ,电子 商务 " /二 

二 meta name 王 "author" content 王 "作者 " /二 

<link href="css/style. css" rel="stylesheet" type 一 "text/css" /> 
=/head> 


=body> 
二 !--container 一 列 开始 -- 二 
<div id= "container"> 
去 上 -header 头 部 开始 -> 
<divid="header"> 
<divclass= havlink"> 


</diy> 
<divclass= "search"> 


</div> 
</div> 
二 !--header 头 部 结束 -- 二 


二 1!--main 主体 开始 -- 二 
<divid="main"> 
<divclass= "main_left"> 


</div> 
<divclass= "main_right"> 


</div> 
=<divclass= "main_center"> 


</div> 
</div> 
二 !--main 主体 结束 -- 二 


二!--footer 底部 开始 -- 二 
<div id= "footer"> 
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=div class= "footer_banner"> 


</diy> 
=divclass= "footer_bottom" > 


</div> 


</div> 
二 !--footer 底部 结束 -- 二 
</div> 
二!--container 一 列 结束 -- 盖 
</body> 
</html> 


5.3.2 “叮当 网 上 书店 ?购物 车 页 XHTML 框架 结构 


购物 车 页 也 是 上 中 下 结构 一 一 头 部 .主体 和 底部 。 根 据 网 站 风格 统一 的 原则 ,页 面 
Logo、 导 航 菜单 模块 ,快速 分 类 检索 模块 .广告 展示 模块 等 保持 布局 与 首页 相同 ,也 就 是 
头 部 和 底部 的 框架 结构 在 网 站 中 是 不 变 的 。 赃 套 关系 同 图 5-6, 页 面 代码 不 再 袭 述 。 

购物 车 页 面 的 主体 部 分 如 图 5-9 所 示 , 自 上 至 下 分 为 4 块 ,分 别 是 标题 导航 、 表 头 、 表 
格 和 页 码 、 圆 角 表格 底部 。 


rs TT ee]| 主 
38.00- 4 67 折 1 mM | 人 这 
354 75 折 1 mR | ft f 


38.00- 9 09 67 白 1 tl | fe 
W650 ¥ 79 折 1 届时 | 二 

从 基 及 区 于 水 总 之 本 (jg 143900- 491.00 67 折 1 i | fet 

一 ME wa 75 折 1 be | tet 
万代 拓 庆 于 水 昌之 上 5 《 话 38.08 #93.00 67 折 1 MR | fet 

Nee 24 320.40 75 折 1 BE | ft 

品 三 全 记 家 于 水 关 之 并) 38.60- 391 00 67 拆 1 Ml | fet 
MIE 4 2040 75 折 1 MR | fk 


图 5-9 购物 车 页 面 主体 部 分 结构 


框架 结构 如 图 5-10 所 示 。 
购物 车 页 面 定义 为 #main 的 DIV 容器 中 预 留 了 3 个 DIV 结构 容器 , 自 上 至 下 分 别 
用 作 存 放 标题 导航 、 表 头 、 表 格 和 页 码 、 圆 角 表 格 底部 的 内 容 。 
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任务 5 “叮当 网 上 书店 ”页 面 框架 结构 


#container 
#header 


.navlink 


.search 


#main 


. shoppingtitle 


. shoppingtabletop 


. shoppingtablecenter 


. shoppingtablefooter 


#footer 


. footer_banner 


. footer_bottom 


图 5-10 购物 车 页 面 内 容 DIV 框架 
XHTML 代码 如 下 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. 
w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

一 html xmlns= "http://www.w3.org/1999/xhtml"> 

二 head 二 

meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 

二 title 二 叮当 网 上 书店 过/title 二 

二 meta name 二 "keywords" content 二 "叮当 网 ,图 书 , 电 子 商务 " /二 

二 meta name 一 "author" content 二 "作者 " /过 

<link href="css/style. css" rel="stylesheet" type= "text/css" /> 

</head> 


=body> 
二!--container 一 列 开始 -- 二 
<div id= "container"> 
二 !--header 头 部 开始 -- 二 
=<div id="header"> 
<div class= "navlink"> 


</div> 
=<div class= "search"> 
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</div> 
</div> 
二 !--header 头 部 结束 -- 二 


二 !--main 主体 开始 -- 
<divid=" main"> 
<divclass= "shoppingtitle" > 


</div> 
<divalign= "shoppingtabletop" > 
</div> 
<divalign= "shoppingtablecenter"> 
</div> 
<divalign= "shoppingtablefooter" > 
</div> 
</div> 
二 !--main 主体 结束 -- 过 


二!--footer 底部 开始 -二 

<div id= "footer"> 
<div class= "footer_banner"> 
</div> 
div class= "footer_bottom"> 


</div> 


</div> 
二!--footer 底部 结束 -二 
</div> 
二 1!--container 一 列 结束 -- 二 
</body> 
</html> 


54 任务 拓展 


5.4.1 “叮当 网 上 书店 ?登录 页 XHTML 框架 结构 


“叮当 网 上 书店 ”登录 页 的 框架 结构 如 图 5-11 一 图 5-15 所 示 。 
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任务 5 


“叮当 网 上 书店 ”页 面 框架 


吉 构 


当当 网 ， 全 球 领先 的 中 文 网 上 书店 


SE 

万 种 国语 全 并 有 大 营 、 化 要 吕 、 训 等 几 二 个 境 计 吾 万 和 让 呈 ，0oo 个 
入 下 本 曲直 中 让 

更 全 价格 

人 

要 太 介 、 网 安全 

全 jo0 个 城下 冯 绕 上 门 ,全 到 付 烤 。 拓 村 一 去 ， 吉 R94 的 物 ， 信 六 到家。 


用 户 登录 


see 
ES 


| 


网 购 乐趣 , 帮 在 


re 国 was 


图 5-11 


“叮当 网 上 书店 ”登录 页 基本 结构 


当当 网 ， 全 球 领先 的 中 文 网 上 书店 位 置 导航 


2 
Dd 户 
Eee ine oe oni ng 体 
入 可 中 pe ge 
更 扳 的 由 
| tN 登录 界面 
和 、 全 
全 国 时 soo 个 二 从 上 门人 款 ， 民 本 点 ， 人 网 内 析 ， 全 半天、 
SFA PY 
ET 
5-12 登录 页 主体 结构 
#container 
#header 
.navlink 
. Search 
#main 
.yposition 
.h 
. login-left .login-right 
#footer 
. footer_banner 
. footer_bottom 


5-13 登录 页 内 容 DIV 框架 
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.login-right 


.login-top 


.login-mid 


.notice 


.main 


| 

1 ,login-dl 
| | 

| 

| 


. login-end 


.right 


.login-bottom 


5-14 登录 界面 结构 图 5-15 登录 界面 DIV 框架 


5.4.2 “叮当 网 上 书店 ?注册 页 XHTML 框架 结构 


“叮当 网 上 书店 ”注册 页 的 框架 结构 如 图 5-16 和 图 5-17 所 示 。 


四 当 网 tt 


Ww a hE: SS 
i | We | a ibm:s | 8 头 
部 
请 栈 一 一 日 R 
TIE 主 
以 下 均 为 必 及 项 
人 体 
na 
en 
RAR 


opreiths © TA see0es, 


@ = 
图 5-16 “叮当 网 上 书店 ”注册 页 基本 结构 


叮当 网 ， 全 球 领先 的 中 文 网 上 书店 位 置 导航 
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任务 5 “叮当 网 上 书店 ”页 面 框架 结构 


5.4.3 “叮当 网 上 书店 ”图 书 分 类 页 XHTML 框架 结构 


“叮当 网 上 书店 ”图 书 分 类 页 的 框架 结构 如 图 5-18 所 示 。 


[ 候 现 在 的 位 置 : 叮当 回 ， 国 世 分 安 > 列表 (站 295) ] 


国 gesie/Va/Veseript 套利 有 国防 文 。 译 


好 cerwschwcr 
用 sw 
me 

Bm ner 
Jeraseript/Jar 
困 琴 

国 Windows 

国 电子 而 务 

困 计 革 机 等 可 基 斌 
Eh Hat 

国 其 他 

国 Rb 开 发 

BO decrees 
国 es 


本 书 是 一 本 专门 介绍 服务 关 近 御 和 组 人 的 开发 与 使 用 的 加 书 。 全 书 共 分 为 瑟 章 ， 分 别 介 


器 控件 与 组 件 开 千 高 肖 坊 各 


三 ) 和 看, 朝 ， 田 突 四 ， 和文。 译 


本 书 是 一 本 坦 门 介绍 服务 着 信件 和 组件 的 开发 与 使 用 的 图书 。 全 书 失 分 为 53 章 ， 
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。 中州 人 民 出 乒 福 入 门 各 作者 : 《 美 ) 库 拓 拉 维 
HI 人民 灿 版 入 
“贵州 人 民 出 版 社 本 书 是 一 本 专门 介绍 肢 务 著 控 首 和 诅 件 的 开发 与 使 用 | 
和 人民 册 所 社 CE 0 了 人 

本 HR 了 式 雪 押 W 近 件 ， 让 定 X 梨 符 导 》 扩 加 

Yes ¥1 


式 雪 所 甸 定 入 件 、 


5-18 图书 分 类 页 主体 结构 


5.4.4 “叮当 网 上 书店 ”图书 详细 页 XHTML 框架 结构 


“叮当 网 上 书店 ”图 书 详细 页 的 框架 结构 如 图 5-19 所 示 。 
从 图 5-19 可 以 看 出 ,“ 叮 当 网 上 书店 ”的 图 书 详细 页 的 头 部 header 区 、 脚 部 footer 区 
与 首页 的 header 区 、 丢 部 footer 区 的 效果 相同 ,main 区 左 侧 与 首页 和 图 书 分 类 页 相同 。 
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5-19 “叮当 网 上 书店 ”图 书 详细 页 


任务 5 “叮当 网 上 书店 ”页 面 框架 结构 


main 区 的 右 侧 ,希望 广大 读者 能 够 根据 之 前 的 其 他 页 面 结 构 和 页 面 内 容 DIV 框架 进行 
举一反三 ,认真 独立 完成 效果 。 


55 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 应 该 已 经 基本 了 解 div 标签 和 span 标签 的 相关 知识 ， 
掌握 了 div 标签 和 span 标签 的 使 用 方法 ,掌握 了 区 块 容器 和 行内 元 素 的 特点 。 掌 握 区 块 
容器 和 行内 元 素 的 特点 ,可 以 为 后 续 的 网 页 设计 工作 打下 坚实 的 基础 。 对 于 初学 者 来 说 ， 
还 需要 经 过 后 期 的 大 量 的 练习 才能 达到 灵活 运用 的 程度 。 其 中 一 些 行业 的 实际 使 用 规范 
跟 书面 理论 有 些 冲 突 , 需 要 自己 和 学习、 掌握, 尽量 贴近 实际 工作 环境 下 的 技能 锻炼 。 


56 能 力 评 估 


. DIV 容器 可 以 容纳 哪些 网 页 元 素 ? 
. 区 块 容器 的 特点 是 什么 ? 

. 行内 元 素 的 特点 是 什么 ? 

. Span 与 DIV 有 哪些 异同 点 ? 


入 wD 
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任务 6 “ 杀 当 网 上 书店 ”首页 总 体 结构 


在 任务 5 中 ,Bill 已 经 完成 了 “叮当 网 上 书店 ”页 面 框架 结构 的 设计 。 但 这 仅仅 是 完 
成 了 一 个 大 框架 , 接 下 来 Bill 将 根据 最 终 效果 完成 每 一 个 页 面 模块 内 容 的 搭建 。 要 完成 
以 上 的 工作 ,必须 先 学 习 XHTML 语言 中 的 一 些 常用 标签 ,如 img ul\li\a\hz、p,\form、 
input 等 ,然后 再 按照 “最 合适 ”的 原则 来 选择 不 同 的 标签 进行 结构 布局 。 

过 学 习 目 标 

(1) 掌握 常用 标签 及 属性 。 

(2) 熟练 掌握 使 用 ul\li 列表 完成 菜单 及 列表 效果 的 制作 。 

(3) 熟练 掌握 根据 效果 图 选择 合适 标签 的 能 力 。 


61 任务 描述 


根据 任务 5 的 总 体 结构 布局 效果 ,“ 叮 当 网 上 书店 ”首页 由 上 、 中 、 下 3 部 分 组 成 。 其 
中 ,header 部 分 可 以 分 上 、 下 两 个 模块 ; main 部 分 可 以 分 左 、 中 、 右 3 个 模块 ; footer 部 分 
可 以 分 上 、 下 两 个 模块 。 每 个 模块 又 可 以 分 成 若干 个 子 模块 。 因 此 ,本 任务 的 主要 工作 就 
是 对 每 个 子 模块 选择 最 合适 的 标签 进行 页 面 布局 。 首 页 的 结构 效果 如 图 6-1 所 示 。 


62 相关 知识 


6.2.1 插 人 图 片 


img 标签 
作用 : 向 网 页 中 插入 一 幅 图 像 。 

语法 : 

<img src= "url" alt= "alttext" /> 


img 标签 常用 属性 如 表 6-1 所 示 。 
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Copyright = OF 2004-2009, All Rights Basarved. Porersd Sr Great 


图 6-1 首页 的 结构 效果 图 
表 6-1 img 标签 常用 属性 


属 性 值 描 述 

alt text 规定 图 像 的 替代 文本 
src url 规定 显示 图 像 的 URL 
height pixels 或 百分比 定义 图 像 的 高 度 
width pixels 或 百分比 设置 图 像 的 宽度 
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6.2.2 列表 u ol 和 1 标签 


列表 标签 是 网 页 设计 中 使 用 最 频繁 的 标签 之 一 。 它 主要 用 菜单 和 两 个 或 者 两 个 以 上 
列表 效果 的 布局 。 什 么 时 候选 择 列表 标签 ? 什么 时 候 不 选择 列表 标签 ? 这 个 需要 在 掌握 
以 下 基本 知识 后 ,通过 项 目的 实践 和 锻炼 不 断 进行 总 结 和 掌握 。 


1. 无 序列 表 


无 序列 表 是 由 ul 和 i 元素 定义 的 ,一 般 用 于 菜单 的 制作 。 无 序列 表 的 默认 符号 是 圆 
点 ,代码 结构 和 效果 如 图 6-2 和 图 6-3 所 示 。 


<ul> 
<1i) 首 页 </1i> 


《1i) 我 的 叮当 <1i> * 首页 
《1i? 图 书 分 类 </1i> * 我 的 叮当 
uy * 图 书 分 类 
图 6-2 无 序列 表 代码 结构 图 6-3 无 序列 表 默 认 效果 


(1) ul 标签 用 来 创建 一 个 标 有 圆 点 的 列表 。 

(2) 通过 定义 ul 不同 的 type 属性 可 以 改变 列表 的 项 目 符号 。 目 前 ,type 属性 的 属性 
值 有 disc(。) ,circleC 〇 ) .square( 国 ) 。 

(3) 1i 标签 在 ul 标签 内 部 使 用 ,用 来 创建 一 个 列表 项 。 


2. 有 序列 表 


有 序列 表 是 由 ol 和 上 i 元 素 定义 的 ,有 序列 表 的 默认 符号 是 "1. ,2. ,3. ,…”, 代 码 结构 
和 效果 如 图 6-4 和 图 6-5 所 示 。 


《ol> 


《li> 首 页 </1i> 
《li 我 的 叮当 </1i> 二 首页 
ee 有 部 弄 
图 6-4 有 序列 表 代 码 结构 图 6-5 有 序列 表 默 认 效果 
6.2.3 超 链接 一 一 a 标签 
作用 : 定义 超 链 接 。 网 页 中 的 超 链 接 可 以 分 为 文本 超 链 接 、 图 像 超 链接 、E-mail 超 链 
语法 : 


<a href="url" target=" "> ... </a> 


a 标签 常用 属性 如 表 6-2 所 示 。 
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表 6-2 a 标签 常用 属性 


属 性 值 描 述 
链接 的 目标 
本 ， 1 链接 到 某 个 网 址 ,如 href 一 "http://www. sina. com" 
Wy 空 链接 ,如 href 二 "#" 
指向 E-mail 地 址 的 超 链接 ,如 href 一 "mailto:mail. sina. com" 
height pixels 或 百分比 定义 图 像 的 高 度 
width pixels 或 百分比 设置 图 像 的 宽度 
_blank 打开 一 个 新 的 (浏览 器 ) 窗 口 
_parent 在 父 窗口 中 打开 
target 
_self 在 当前 窗口 打开 
_top 在 上 一 级 窗口 打开 


6.2.4 表单 类 标签 


1. 表单 一 一 form 标签 
作用 : 表单 是 实现 动态 网 页 的 一 种 主要 的 外 在 形式 。 


语法 : 


<form name= "form_name" method= "post" action= "url" enctype= "value" 
target= "target_win"> 


</form> 


form 标签 常用 属性 如 表 6-3 所 示 。 


表 6-3 form 标签 常用 属性 


属 性 描 述 
name 表单 的 名 称 
定义 表单 结果 从 浏览 器 传送 到 服务 器 的 方法 ,共有 两 种 方法 : get 和 post。get 方 
式 是 将 表单 控件 的 name/value 信息 经 过 编码 之 后 ,通过 URL 发 送 ( 可 以 在 地 址 栏 
method 中 看 到 ) 。post 方式 是 将 表单 的 内 容 通过 http 发 送 ,在 地 址 栏 中 看 不 到 表单 的 提 
交 信 息 。( 一 般 来 说 ,如 果 只 是 为 取得 和 显示 数据 ,用 get; 一 旦 涉及 数据 的 保存 和 
更 新 ,建议 用 post) 
action 用 来 定义 表单 处 理 程序 (ASP、CGI 等 程序 ) 的 位 置 (相对 地 址 或 绝对 地 址 ) 
设置 表单 资料 的 编码 方式 。 
text/plain: 以 纯 文 本 形式 传送 信息 ; 
enctype 


application/x-www-form-urlencoded: 默认 的 编码 形式 ; 
multipart/form-data: 使 用 mine 编码 
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续 表 
属 性 描 述 
设置 返回 信息 的 显 方式 。 
_blank: 将 返回 信息 显示 在 新 打开 的 浏览 器 窗口 中 ; 
target _self; 将 返回 信息 显示 在 当前 浏览 器 窗口 中 ; 


_parent: 将 返回 信息 显示 在 父 级 浏览 器 窗口 中 ; 
_top : 将 返回 信息 显示 在 顶级 浏览 器 窗口 中 


2. 常用 的 表单 元 素 控 件 


在 表单 中 ,必须 要 使 用 各 种 表单 元 素来 搜集 用 户 的 信息 ,完成 人 机 之 间 的 数据 交互 。 
常见 的 表单 控件 如 表 6-4 所 示 。 


表 6-4 表单 控件 常用 属性 描述 


表单 控件 描述 

input type= "text" 单行 文本 输入 框 

input type= "password" 密码 输入 框 (输入 的 字符 用 * 表示 ) 

input type= "submit" 将 表单 (Form) 中 的 信息 提交 给 表单 action 所 指向 的 文件 

input type= "checkbox” 复 选 框 

input type= "radio" 单 选 按钮 

input type= "file" 文件 上 传 框 

input type= "hidden" 隐藏 域 

select 下 拉 列 表 框 

textarea 多 行文 本 输入 框 

(1) 文本 框 

文本 框 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ,通常 被 用 来 填写 单个 字 或 者 简短 
的 回答 ,如 姓名 、 地 址 等 。 

语法 : 

<input type= "text" name="..." size="..." maxlength="..." value="..." /> 


其 中 ,type= "text" 定 义 单行 文本 输入 框 ; name 属性 定义 文本 框 的 名 称 , 要 保证 数据 
的 准确 采集 ,必须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文本 框 的 宽度 ,单位 是 单个 字 
符 宽 度 ; maxlength 属性 定义 最 多 输入 的 字符 数 ; value 属性 定义 文本 框 的 初始 值 。 

(2) 密码 框 

密码 框 是 一 种 特殊 的 文本 域 ,用 于 输入 密码 。 当 访问 者 输入 文字 时 ,文字 会 被 * 或 其 
他 符号 代替 ,而 输入 的 文字 会 被 隐藏 。 

语法 : 


<input type= "password" name="..." size="..." maxlength="..." /> 


其 中 ,type 二 "password" 定 义 密 码 框 ; name 属性 定义 密码 框 的 名 称 , 要 保证 数据 的 
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准确 采集 ,必须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 密码 框 的 宽度 ,单位 是 单个 字符 
宽度 ; maxlength 属性 定义 最 多 输入 的 字符 数 。 


(3) 提交 按钮 

提交 按钮 用 来 将 输入 的 信息 提交 到 服务 器 。 
语法 : 

< 一 input type 一 "submit" name="..." value="..." /> 


其 中 ,type 二 "submit" 定 义 提交 按钮 ; name 属性 定义 提交 按钮 的 名 称 ; value 属性 定 
义 按钮 的 显示 文字 。 

(4) 复 选 框 

复 选 框 允许 在 待 选项 中 选中 一 项 或 一 项 以 上 的 选项 。 每 个 复 选 框 都 是 一 个 独立 的 元 
素 ,都 必须 有 一 个 唯一 的 名 称 。 

语法 : 


<input type 一 "checkbox"” name="..." value="..." /> 


其 中 ,type 二 "checkbox" 定 义 复 选 框 ; name 属性 定义 复 选 框 的 名 称 ,要 保证 数据 的 
准确 采集 ,必须 定义 一 个 独一无二 的 名 称 ; value 属性 定义 复 选 框 的 值 。 

(5) 单 选 按钮 

当 需 要 访问 者 在 待 选项 中 选择 唯一 的 选项 时 ,就 需要 用 到 单 选 按钮 了 。 

语法 : 


" 


<input type= "radio" name="..." value="..." /> 


其 中 ,type= "radio" 定 义 单 选 按钮 ; name 属性 定义 单 选 按钮 的 名 称 , 要 保证 数据 的 
准确 采集 , 单 选 按钮 都 是 以 组 为 单位 使 用 的 ,在 同一 组 中 的 单 选 项 都 必须 用 同一 个 名 称 ; 
value 属性 定义 单 选 按钮 的 值 , 在 同一 组 中 ,它们 的 值 必须 是 不 同 的 。 

(6) 文件 上 传 框 

有 了 时候, 需要 用 户 上 传 自 己 的 文件 ,文件 上 传 框 看 上 去 和 其 他 文本 框 差不多 ,只 是 它 
还 包含 了 一 个 浏览 按钮 。 访 问 者 可 以 通过 输入 需要 上 传 的 文件 的 含 路 径 名 称 或 者 单 击 
“浏览 ?按钮 选择 需要 上 传 的 文件 。 

注意 : 在 使 用 文件 上 传 框 以 前 ,要 先 确定 你 的 服务 器 是 否 允 许 匿名 上 传 文件 。 在 
form 标签 中 必须 设置 enctype 二 "multipart/form-data" 来 确保 文件 被 正确 编码 ; 另外 , 表 
单 的 传送 方式 必须 设置 成 post。 

语法 : 

<input type= "file” name="..." size 一 "15”maxlength 一 "100" /> 


其 中 ,type 二 "file" 定 义 文件 上 传 框 ; name 属性 定义 文件 上 传 框 的 名 称 , 要 保证 数据 
的 准确 采集 ,必须 定义 一 个 独一无二 的 名 称 ; size 属性 定义 文件 上 传 框 的 宽度 ,单位 是 单 
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个 字符 宽度 ; maxlength 属性 定义 最 多 输入 的 字符 数 。 
(7) 隐藏 域 
隐藏 域 是 用 来 收集 或 发 送 不 可 见 信息 的 ,对 于 网 页 的 访问 者 来 说 ,隐藏 域 是 看 不 见 
的 。 当 表单 被 提交 时 ,隐藏 域 就 会 将 信息 用 户 设置 时 定义 的 名 称 和 值 发 送 到 服务 器 。 
语法 : 


<input type= "hidden" name="..." value="..."> 


其 中 ,type 二 "hidden" 定 义 隐藏 域 ; name 属性 定义 隐藏 域 的 名 称 , 要 保证 数据 的 准确 
采集 ,必须 定义 一 个 独一无二 的 名 称 ; value 属性 定义 隐藏 域 的 值 。 

(8) 下 拉 列 表 框 

下 拉 列 表 框 允许 用 户 在 一 个 有 限 的 空间 设置 多 种 选项 。 

语法 : 

<select name="..." size="..." multiple> 

<option value="..." selected>...</option> 

a 

其 中 ,size 属性 定义 下 拉 列 表 框 的 行 数 ; name 属性 定义 下 拉 列 表 框 的 名 称 ; multiple 
属性 表示 可 以 多 选 , 如 果 不 设置 本 属性 ,那么 只 能 单 选 ; option 标签 定义 一 个 选项 ; value 
属性 定义 选项 的 值 ; selected 属性 表示 默认 已 经 选择 本 选项 。 

(9) 多 行文 本 框 

多 行文 本 框 也 是 一 种 让 访问 者 自己 输入 内 容 的 表单 对 象 ,可 以 让 访问 者 填写 较 长 的 内 容 。 

语法 : 


<textarea name="..." cols="..." rows="..."></ textarea> 


其 中 ,name 属性 定义 多 行文 本 框 的 名 称 , 要 保证 数据 的 准确 采集 ,必须 定义 一 个 独 一 
无 二 的 名 称 ; cols 属性 定义 多 行文 本 框 的 宽度 ,单位 是 单个 字符 宽度 ; rows 属性 定义 多 
行文 本 框 的 高 度 ,单位 是 单个 字符 宽度 。 


6.2.5 hz 和 p 标签 


1. hn 标题 标签 


作用 : 定义 标题 ,主要 用 于 新 闻 文 章 、 图 书 名 等 标题 行 上 。hl 定义 最 大 的 标题 ,h6 定义 
最 小 的 标题 。 
语法 : 


<hn>...</hn> 
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2. p 段落 标签 


作用 : 定义 段落 ,主要 用 于 新 闻 文章 、 图 书简 介 等 正文 上 , 除 标 题 行 以 外 的 文本 段落 上 。 
语法 : 


p/p 


63 任务 实现 


6.3.1 首页 header 区 域 XHTML 模块 结构 


header 区 效果 如 图 6-6 所 示 。 


图 6-6 header 区 效果 


由 图 6-6 可 以 看 出 ,整个 header 区 的 设计 步骤 分 3 个 阶段 ,分 别 是 Logo 图 片 、 用 户 
快速 导航 模块 .导航 菜单 模块 ,代码 如 下 : 


<div class= "navlink"> 
<div class= "navlink_logo"> 二!--logo 图 片 -- 二 
</div> 
<div class= "navlink_right"> 二 !-- 用 户 快速 导航 模块 -- 二 
</div> 
<div class= "navlink_center"> 二 !-- 导 航 菜单 模块 -- 二 
</div> 

</div> 


左边 Logo 图 片区 插入 了 一 幅 图 片 ,可 以 用 img 标签 来 实 叮当 网 

现 。 另 外 ,从 方便 交互 的 角度 ,再 给 图 片 做 一 个 超 链 接 ,效果 如 Limegene om 

图 6-7 所 示 。 图 6-7 Logo 图 片 
XHTML 代码 如 下 : 效果 图 


<=div class= "navlink_logo"> 
<a href="index. html"> <img src="images/logo. png" width="87" height 一 "40" 
alt 二 "叮当 网 上 书店 " class 二 "logoborder" /二 一/a> 
</div> 
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用 户 快速 导航 模块 和 导航 菜单 模块 如 图 6-8 所 示 ,一 般 使 用 ui\li\a 标签 来 实现 。 如 
本 例 导航 菜单 模块 直接 采用 了 a 标签 实现 ,用 户 快速 导航 模块 采用 了 ul\li\a 结构 。 


司 由 | 开动 中 心 | 力 的 号 忆 | 新 用 记 注 册 | 其 录 
图 6-8 用 户 快速 导航 模块 和 导航 菜单 模块 效果 


XHTML 代码 如 下 : 


二 div class= "navlink_right"> 
过 a href 一 "# "之 购物 车 <</a> | 
一 a href 一 "# "帮助 中 心 一 /a> | 
过 a href 一 "# "之 我 的 账户 </a> | 
<a href 王 "# "之 新 用 户 注册 </a> | 
<<a href 二 "#" 二 登录 /a 二 
</div> 
<div class= "navlink_center"> 
<u> 
<li><a href="#" class= 二 "aleft" 二 首页 </a></li> 
<li><a href="#" class 一 "acenter" 之 我 的 叮当 天 /a> 王 /li 
<li 盖 <a href 一 "# "class 一"aright" 之 图 书 分 类 <</a> 王 /li 
</ul> 
</div> 


这 时 ,估计 有 些 读者 会 产生 相应 的 疑问 : 同样 都 是 超 链接 菜单 ,为 什么 一 个 要 采用 
UU,li 和 a 标签 来 实现 ,而 另 一 个 直接 采用 a 标签 来 实现 呢 ? 这 里 ,Bill 要 跟 大 家 一 起 来 分 
析 , 让 读者 能 够 熟练 掌握 采用 列表 标签 来 进行 菜单 和 列表 效果 的 结构 布局 。 

细心 的 读者 不 难 发 现 , 其 实 这 两 个 菜单 的 最 终 效果 还 是 不 一 样 的 ,用 户 快速 导航 菜单 
的 3 个 菜单 项 都 有 固定 的 宽度 和 高 度 ,而 导航 菜单 的 每 个 菜单 项 的 宽度 不 尽 相同 ,是 随 着 
超 链 接 对 象 的 宽度 而 变化 的 。 因 此 ,这 里 Bill 要 告诉 大 家 ,以 后 在 菜单 和 列表 效果 的 结构 
布局 时 ,如 果 它 没有 固定 的 宽度 和 高 度 ,可 以 直接 采用 a 标签 来 实现 ; 如 果 它 有 固定 的 宽 
度 和 高 度 ,我 们 就 采用 ui\li 和 a 结合 来 实现 。 当 然 ,这 不 是 绝对 的 ,主要 是 为 后 续 的 CSS 
样式 编写 提供 方便 。 


6.3.2 首页 search 区 域 XHTML 模块 结构 


search 区 效果 如 图 6-9 所 示 。 


相 序 设计 | qh 开发 | 站 基诺 管理 | nxAf 至 习 Ce | jsp WET | St Sarmer | PP C# | ASp MET | SQL Server 


TT | 。 就 吉 起家 : 扫 扫 | 执 雪 。 要 按 ) 热 控 执 按 ; 执 搜 ; 热 搜 


图 6-9 search 区 效果 


如 图 6-9 所 示 , search 区 可 以 分 成 上 、 下 两 个 块 ,分 别 为 searcher_top 和 searcher_ 
bottom; 代 码 如 下 : 
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div class= "search"> 


div class= "searcher_top"> 


</div> 
<div class= "searcher_bottom"> 


</div> 
</div> 


其 中 searcher_top 部 分 的 效果 如 图 6-10 所 示 。 


联 序 家 寺 | Wb 开 划 | 效 尖 可 管理 | "ne 站 宇和 Cs | APNET | QL sever | PHP 


图 6-10 ”searcher_top 效果 


从 任务 3 中 对 图 片 素材 的 设计 和 制作 来 看 , searcher_top 部 分 左 、 右 有 两 幅 圆 角 图 
片 , 中 间 是 一 幅 背 景 图 片 。 这 种 效果 在 网 页 制作 中 经 常用 到 ,后 续 任务 中 会 重点 介绍 ,这 
里 不 再 袭 述 。 因 此 ,可 以 把 整个 searcher_top 部 分 再 分 解 成 3 个 块 结构 ,分别 为 yuanjiao 
_left yuanjiao_right yuanjiao_center, 代 码 如 下 : 


<div class= "searcher_top"> 
<div class= "yuanjiao_left"> .</div> 
<div class= "yuanjiao_right"> .… </div> 
<div class= "yuanjiao_center"> .… </div> 
</div> 


接 下 来 在 这 3 个 块 中 插入 相应 的 内 容 。 注 意 ,对 于 左 、 右 两 边 的 圆 角 图 片 ,通常 不 采 
用 在 XHTML 结构 中 用 img 标签 来 插入 ,而 是 在 后 面 学 习 的 CSS 中 采用 设置 背景 图 片 
来 实现 。 这 里 读者 又 要 产生 疑问 ,为 什么 这 样 做 呢 ? 有 时 用 img 标签 插入 图 片 ,有 时 又 
不 用 img 标签 插入 图 片 。 这 里 Bill 又 要 告诉 大 家 一 个 网 站 设计 的 原则 , 那 就 是 为 了 提高 
网 站 的 传输 效率 ,加 快 网 页 浏览 的 速率 ,网 站 制作 人 员 要 尽量 考虑 网 站 设计 制作 过 程 中 ， 
将 网 站 的 总 体 容 量 尽 可 能 缩减 。 因 为 插入 图 片 后 ,由 于 图 片 的 容量 比较 大 会 直接 导致 网 
站 的 容量 变 大 。 科 学 研究 表明 , 当 一 个 网 页 在 90 秒 内 无 法 正常 显示 时 ,那么 用 户 就 会 失 
去 耐心 不 会 再 进行 浏览 。 因 为 网 站 的 容量 大 小 跟 网 站 浏览 的 速率 是 成 正比 的 。 所 以 按照 
这 个 原则 ,此 处 只 要 将 代码 如 下 编写 就 可 以 了 。 


div class= "yuanjiao_left"></div> 
<div class= "yuanjiao_right"></div> 


至 于 中 间 部 分 ,由 图 6-11 可 以 看 出 ,图 书 分 类 、 热 门 分 类 、 其 他 分 类 3 种 效果 类 似 ,可 
以 用 a 标签 来 实现 。 


程序 设计 | Yeb 开 发 | 数 舌 库 首 理 | Linwz 入 门 学 习 C# | ASP. NET | SQL Server | PH C# | ASFP. NET | SQL Server 


图 6-11 searcher_top 中 间 效 果 
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XHTML 代码 如 下 : 


< 一 div class= "yuanjiao_center"> 
图 书 分 类 : 
二 a href 二 "# "之 程序 设计 二 /a> 二 span>| 一 /span> 
过 a href 一 "#" 盖 Web 开发 </a> 一 span>| 一 /span> 
过 a href 二 "# "过 数据 库 管理 一 /a 之 一 span>| 二 /span> 
过 a href 一 "# "Linux 人 门 管理 一 /a 之 一 span>| 王 /span> 
热门 搜索 : 
<a href="#">C#</a><span>|</span> 
<a href="#">ASP.NET</a><span>|</span> 
<a href="#">SQL Server</a><span>|</span> 
<a href="#">PHP</a><span>|</span> 
其 他 分 类 : 
<a href="#">C#</a><span>|</span> 
<a href="#">ASP.NET</a><span>|</span> 
<a href="#">SQL Server</a> 

</div> 


其 中 searcher_bottom 部 分 的 效果 如 果 6-12 所 示 。 


林 当 本 地 国 [ 可 | 息 妆 二 : 扑 搜 ， 扫 2 执 搜 》 执 审 。 执 扫 热 搜 。 扑 扫 7 


图 6-12 searcher_bottom 效果 


从 图 6-12 可 以 看 出 ,这 部 分 重点 采用 了 表单 的 效果 ,因此 ,将 这 部 分 划分 为 3 个 块 : 
左边 的 bottomform 区 、 中 间 的 bottomimglink 高 级 搜索 图 片区 和 右边 的 文字 


bottomlinkwords 区 。 


XHTML 代码 如 下 


<div class= "seacher_bottom"> 
<div class="bottomform"> 
</div> 
div class= "bottomimglink"> 
</div> 
<div class="bottomlinkwords"> 
</div> 

</div> 


bottomform 区 可 以 使 用 select 标签 和 input 标签 来 实现 。 黄 色 的 “搜索 ”按钮 的 背景 


是 图 片 ,因此 一 般 采 用 a 标签 在 CSS 中 设置 背景 图 片 来 实现 。 
XHTML 代码 如 下 : 


=div class="bottomform"> 
=form name= "seacherform" method= "post" action=""> 
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“叮当 网 上 书店 ”首页 总 


总 


select name= "booktype" class 
二 option value 二 "1" 之 叮当 图 书 二 /option 二 
过 option value 二 "2" 这 叮当 分 类 二 /option 二 


</select> 


<input type= "text" name= "keywords" class= "txtinputsytle" 
value 二 "请 输入 要 查询 的 关键 词 " /二 
一 a href 一 " 井 "class 一 "btninputstyle" 之 搜 &nbsp; 索 一 /a> 


去 上 -文字 下 面 有 背景 图 片 ,在 结构 中 只 须 写 出 文字 内 容 ,背景 效果 在 CSS 中 实现 。-- 二 


</form> 
</div> 
bottomimglink 是 超 链 接 的 效果 ,按照 尽 可 能 不 插入 图 片 的 原则 ,可 以 使 用 CSS 背景 


图 片 来 实现 效果 ,所 以 在 这 里 只 须 用 a 标签 来 实现 。 


XHTML 代码 如 下 : 


=<div class="bottomimglink"> 
<a href="#"></a> 


</div> 


bottomlinkwords 部 分 采用 a 标签 来 实现 ,XHTML 代码 如 下 : 


<div class= "bottomlinkwords"> 


热门 搜索 : 

过 a href=="# "二 热 搜 1 二 /a 二 
过 a href=="# "二 热 搜 2 过 /a 二 
过 a href=="# "二 热 搜 3 二 /a 二 
过 a href=="# "之 热 搜 4 二 /a 二 
过 a href=="# "之 热 搜 5 二 /a 二 
过 a href 一 "# "之 热 搜 6 二 /a 二 
过 a href=="# "之 热 搜 7 二 /a 二 
</div> 


6.3.3 首页 中 间 left 区 域 XHTML 模块 结构 


中 间 left 效果 如 图 6-13 所 示 。 
如 图 6-13 所 示 ,左边 部 分 主要 是 竖 排 导航 菜单 ,从 结构 上 可 以 分 为 上 、 下 两 块 ,分 别 
为 图 书 left_top 块 和 品牌 出 版 社 left_bottom 块 ,XHTML 代码 如 下 : 


<div class="main_left"> 


=div class= "left_top"> 


</div> 
=<div class= "left_bottom"> 
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</div> 
页 新书 推荐 
四 
田 -到 
图 sp Er 一 一 left top 
国 mac/m/msertpt 
国 cK/ 
国 cs/DIV 
mm yuanjiaotop 一 
I 新 书 推荐 
困 Joreserint /Jore me 
用 开 
OD windows 困 .更 
用 8 了 出 务 困 二 :er 
ED Hi 国 sasie/Ya /Vaseript 
EE ii 困 ce 
Pa 困 s/orv 
国 RH 发 四 mne 
cee KY 
br yuanjiaobottom—™=] [ED yee 
mm 国 Jaraseript /Java 
mr 国 革 
a JereSeript /Tare 困 windows 
图 于 
国 wndows 图 志和 | 
0 电子 商务 四 计算 机 等 级 考试 
OD HN 
Rs 其 
ps 加 Pe 
“MARL Lg 
“ 谢 州 人 RR 社 加 国 ve 
本 fear 国 ssprv 
国 me/ne 
“ 谍 州 人 RR 
“ MAR [ee 
委 州 人 民 二 社 国 Jaraseript/Jars 
机 州 人民 出 所 社 
NAR 国 开 
委 州 人 RR 村 困 windows 
计 州 人 民 业 大 社 加 电子 商务 
main_left left_top 


6-13 中间 left 效果 


再 来 分 析 left_top 和 left_bottom 的 结构 。 这 两 个 结构 非常 类 似 ,文字 背景 都 一 样 ,不 同 
点 是 列表 项 前 面 的 图 片 不 同 , 因 此 ,只 要 完成 一 个 , 另 一 个 只 要 复制 修改 就 可 以 实现 了 。 

下 面 以 left_top 为 例 进行 讲解 。left_top 可 以 划分 为 两 个 块 , 上 面部 分 yuanjiaotop 
的 结构 与 search 区 searcher_top 类 似 , 下 面部 分 yuanjiaobottom 采用 ui\li\a 标签 实现 。 

XHTML 代码 如 下 : 


=div class= "left_top"> 
div class="yuanjiaotop"> 二 !-- 与 search 区 searcher_top 类 似 -- 二 
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<div class= "mainyuanjiao_left"></div> 
<div class= "mainyuanjiao_right"></div> 
div class 二 "mainyuanjiao_center" 二 图书 三 /div 二 
</div> 
< 一 div class= "yuanjiaobottom"> 
<u> 
过 li><a href="#" 二 新书 推荐 </a 二 </li> 
<li><a href="#">C#</a></l> 
<li><a href="#">.NET</a></li> 
<li><a href="#">ASP.NET</a></li> 
<li><a href="#">Basic/VB/VBScript</a></li> 
<li><a href="#">C/C++/VC++</a></li> 
<li><a href="#">CSS/DIV</a></li> 
</ul> 
</div> 
</div> 


同样 ,品牌 出 版 社 left_bottom 块 的 XHTML 代码 如 下 : 


<div class= "left_bottom"> 
<div class= "yuanjiaotop"> 二 !-- 同 search 区 searcher_top 类 似 -- 二 
<div class= "mainyuanjiao_left"></div> 
<div class= "mainyuanjiao_right"></div> 
二 div class="mainyuanjiao_center" 之 品牌 出 版 社 一 /div 过 
</div> 
<div class= "yuanjiaobottom"> 
<u> 
过 li>><a href="# "二 贵州 人 民 出 版 社 </a 二 </li> 
过 li><a href="#" 清 华 大 学 出 版 社 </a 二 </li> 
过 li><a href="#" 二 机械 工业 出 版 社 </a 二 <</li> 
过 li>><a href 一 "# "之 电子 工业 出 版 社 一 /a 之 一 /1 
<1i 这 <<a href="#" 过 浙江 大 学 出 版 社 </a</li> 
过 li>><a href="#" 过 邮电 出 版 社 </a 二 </li> 
li>><a href 一 "# "二 上 海 文艺 出 版 社 </a 二 </li> 
</u> 
</div> 
</div> 


6.3.4 首页 中 间 right 区 域 XHTML 模块 结构 
中 间 right 区 域 结构 如 图 6-14 一 图 6-16 所 示 。 
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您 还 不 是 叮当 网 用 户 人 


“本 38 设 计 《〈 第 2 后) 
"#5P. 3ET 2.0 中 文 版 

* .ET 

"ASF ET 中 文 腺 
Basic/YB/VBSeript 中 文 
“CIC 中 文 版 
"C55/DIV 中 文 版 

* ETL /mE 中文 版 十 一 right_bottom 
，32EE 中 文 版 
vaserift/Java 中 文 版 
“3 中 文 版 

* Windows 中 文 版 

“ 电子 商务 中 文 版 
“计算 机 中 文 版 

“ 计算 机 理论 中 文 版 

“ 其 他 中 文 版 

“ 6 开发 中 文 版 


6-14 ”中 间 right 区 域 效果 


.yuanjiaotp 
“ 框架 设计 ( 第 2 版 ) 
"ASP NET 2.0 中 文 版 
"NET 

*ASP. 了 ET 中 文 版 
，Basic/VB/YBSeript 中 广 
*C/CH+/WC/YC++ 中 文 版 
"CSS/DIV 中 文 版 

。 REL/XNL 中 文 版 上 一 yuanjiaobottom 
" J2EE 中 文 版 
"JavaSeript/Java 中 文 版 
"JS 中文 版 
，Windows 中 文 版 

"电子 商务 中 文 版 

* 计算 机 中 文 版 
"计算 机 理论 中 文 版 
"其 他 中 文 版 

”网 站 开发 中 文 版 


yuanjiaotop 


yuanjiaobottom 


6-15 ”right_top 效果 6-16 ”right_bottom 效果 
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如 图 6-14 所 示 , 中 间 right 部 分 可 以 分 成 上 、 下 两 个 块 ,分 别 为 right_top 和 right_ 
bottom,XHTML 代码 如 下 : 


=div class="main_right"> 
<div class= "right_top"> .</div> 
<div class= "right_bottom"> .</div> 
</div> 


如 图 6-15 所 示 ,right_top 部 分 又 可 以 分 为 两 个 块 ,一 个 是 用 户 登 录 yuanjiaotop ,一 
个 是 表单 yuanjiaobottom ,表单 根据 效果 图 可 以 用 label 和 input 标签 来 实现 。 
XHTML 代码 如 下 : 


div class= "right_top"> 
<div class= "yuanjiaotop"> 
<div class= "mainyuanjiao_left"></div> 
<div class="mainyuanjiao_right"></div> 
二 div class 一 "mainyuanjiao_center" 二 用户 登录 二 /div 二 
</div> 
< 所 div class= "yuanjiaobottom"> 
一 form method= "post" action=""> 
三 labelE-mail 地 址 或 者 昵称 : 一 /label 一 二 br /二 
<input type= "text" name= "username" /二 一 br /> 
二 label 请 密码 : 一 /label 盖 一 br /二 
一 iput type= "password" name= "pwd" /二 一 br /> 
二 input type 一 "submit'" value 一 "登录 " /二 一 br /请 
三 label 二 您 还 不 是 采 当 网 用 户 ?</label<br /二 
一 a href=="# "请 创 建新 用 户 &gt; &gt; 一 /a 二 
</form> 
</div> 
</div> 


如 图 6-16 所 示 ,right_bottom 块 与 left_bottom 块 类 似 ,XHTML 代码 如 下 ; 


<div class= "right_bottom"> 
一 div class= "yuanjiaotop"> 
<div class= "mainyuanjiao_left"></div> 
<div class= "mainyuanjiao_right"><=/div> 
二 div class 一 "mainyuanjiao_center" 过 点 击 排行 &nbsp;Top&nbsp;10 一 /div> 
</div> 
<div class="yuanjiaobottom"> 
<u> 
二 li><a href="#" 过 框架 设计 第 2 版 </a</li> 
< 一 li 盖 一 a href="#" 室 ASP.NET 2.0 中 文 版 </a> 王 /1 
<li><a href="#">.NET</a></l> 
过 li><a href 一 "# "之 ASP.NET 中 文 版 </a>></1i> 
过 li><a href="#" 之 J2EE 中 文 版 </a>></1i> 
过 li><a href=="#" 过 计算 机 中 文 版 </a 二 </li> 
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<<1i 盖 <<a href=="# "二 其 他 中 文 版 <</a 二 </li> 
</u> 
</div> 
</div> 


6.3.5 首页 中 间 center 区 域 XHTML 模块 结构 


中 间 center 区 域 结构 图 如 图 6-17 一 图 6-20 所 示 。 


厢 当 同 : ba. 训 


四 主场 推 定 最 全 的 R 书 、 故 也 交 的 区 尽 在 


center top 一 小 


是 寻 -Y48 前 宫 价 : 让 4D: 污 折 


4 全数 肝 ， 民 佳品 所 、 辕 攻 价 格 : 草地 


一 一 训 


Ey 


Erne 


Fe ¥2.00 Fm ¥ 0 
center_middle 一 全 a 


Ym 下 可 0 Yeoem 


更 本 司 保 体 雹 点 最 势 固 书 ， 全 场 条 六 、 天 天 村 区 bas 


Effective ce 中 文 有 it = 了 序 的 5079 万 法 


全 商 ; “加 六 IT 
; 人 民 抒 汪 出 乒 社 
日 期 : 007-5-1 


center_footer 一 小 


HE 寺 创 六 知 项 直 = 记 于 
ch ET 


全 书 寺 分 5 个 部 分 执 04 济 。 贡 一 可 计 介 招 了 4SP YET 2 6 历 其 埋 径 重 开 Winnl 


ne 


图 6-17 中 间 center 区 域 效果 图 
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任务 6 “叮当 网 上 书店 ”首页 总 体 结构 
从 图 6-17 可 以 看 出 ,Center 区 域 可 以 分 为 3 个 块 ,分 别 为 center_top、center_middle 
和 center_footer。 代 码 如 下 : 


一 div class="main_center"> 
二 div class= "center_top"> .… </div> 
<div class= "center_middle"> .</div> 
<div class= "center footer"> ... </div> 
</div> 


(1) 首先 来 看 center_top 结构 的 搭建 。 通 过 图 6-18 可 以 看 出 ,center_top 部 分 又 可 
以 划分 为 两 个 块 , 一 个 是 主编 推荐 区 centertopclass, 采 用 ui 和 1i 列表 标签 或 者 采用 div 
标签 也 可 以 实现 。 


了 主编 推荐 最 全 的 图 书 、 最 低 的 价格 尽 在 叮当 网 ! 详情 >>| 
Effective C# 中 文 版 改善 c# 程 序 的 50 种 方法 

本 书 围绕 一 些 关于 C# 和 . JET 的 重要 主题 ， 包括 C 节 在 言 元 素 、. 亚 T 资 源 管 理 、 使 用 [ 杯 
(ee 达 设计 、 创 建 二 进 制 姐 件 和 使 用 框架 等 ， 讲 述 了 最 党 见 的 50 个 问题 的 解决 方案 ， 为 程序 员 
提供 了 改善 c#* 和 .JET 程序 的 方法 。 本 书 通过 格 每 个 条 款 构 建 在 之 前 的 条 款 之 上 ， 并 合理 地 
利用 之 前 的 条 款 ， 来 让 读者 最 大 限度 地 学 习 书 中 的 内 容 ， 为 其 在 不 同情 况 下 使 用 最 佳 构造 
提供 指导 。 本 书 适 合 各 层次 的 c# 程 序 员 阅 读 ， 同 时 可 以 推荐 给 高 校 教师 ( 尤其 是 软件 学 院 
教授 C#/ .JEI 课 程 的 老师 ) ， 作 为 C# 台 语 教学 的 参考 书 . . 


centertopclass 


centerimg 


定价 ;49 。 折扣 价 : 38 折扣 : 75 折 


图 6-18 center_top 效果 图 
XHTML 代码 如 下 : 


div class= "centertopclass"> 
二 ul 二 二 !-- 采 用 ul 上 i 列表 实现 -- 二 
过 li class 一 "centertopullione" 过 主编 推荐 &nbsp; 最 全 的 图 书 、 最 低 的 价格 尽 在 叮当 网 
</l> 
li class 王 "centertopullitwo" 之 一 a href="#" 志 详情 &gt;i&gt; 二 /a>> 一 /li 
</u> 
</div> 


对 于 图 文 混 排 区 centerimg 块 需要 注意 的 是 ,标题 文字 通常 使 用 hn 标签 来 完成 ,但 
如 果 有 超 链 接 , 则 使 用 a 标签 来 实现 效果 更 好 ; 段落 使 用 p 标签 实现 ; span 标签 用 来 实 
现 个 别 需 要 特定 表示 的 效果 。 具 体 代 码 如 下 : 


<div class= "centerimg"> 


a href="#"><img src="images/BookCovers/978711515888_new. jpg" height="180" 
width="132" alt="" /></a> 
过 a href 一 "# "class 一 "booktitle" 之 一 h5 之 Effective C# 中 文 改善 版 </h5 之 二 /a> 
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二 p class 一 "bookcontents" 过 本 书 围绕 一 些 关 于 C# 和 .NET 的 重要 主题 ,包括 C# 语 言 元 
素 ,.NET 资源 管理 、 使 用 C# 表 达 设 计 、 创 建 二 进 制 组 件 和 使 用 框架 等 ,讲述 了 最 常见 的 
50 个 问题 的 解决 方案 ,为 程序 员 提 供 了 改善 C# 和 .NET 程序 的 方法 。 本 书 通过 将 每 个 条 
款 构建 在 之 前 条 款 之 上 ,并 合理 地 利用 之 前 的 条 款 , 来 让 读者 最 大 限度 地 学 习 书 中 的 内 容 ， 
为 其 在 不 同情 况 下 使 用 最 佳 构 造 提供 指导 。 本 书 适合 各 层次 的 C# 程 序 员 阅 读 ,同时 可 以 
推荐 给 高 校 教 师 ( 尤 其 是 软件 学 院 教授 C#/.NET 课程 的 老师 ), 作 为 C# 双语 教学 的 参考 
a 

二 p 记 二 span class 二 "spanone" 二 定价: 圣 49 元 二 /span> 

二 span class 一 "spantwo" 之 折扣 价 : 圣 38 元 二 /span> 

二 span class 一 "spanthree" 盖 折扣 : 75 折 王 /span 之 一 /p> 

</div> 


(2) 接 下 来 分 析 center_middle。 从 图 6-19 看 出 ,center_middle 可 以 分 为 上 、 下 两 块 ， 
上 面部 分 与 centertopclass 相同 ,在 这 里 就 不 作 说 明了 。 下 半 部 分 最 大 的 特点 就 是 它 的 排 
列 如 一 个 电子 相册 ,这 种 效果 在 一 些 购物 网 站 经 常用 到 ,一 般 使 用 ul li 列表 来 实现 。 另 
外 ,因为 整个 效果 都 是 类 似 的 ,所 以 只 需要 完成 其 中 一 个 ,其 余 的 复制 修改 即 可 。 


centertopclass -ej 译 且 曼 订 最 条 最 基 全 政 款 全 攻打 攻 己 > 


编程 灾 例 精粹 


centerulli - 革 


Visual Cr2005 


编程 技巧 大 全 


6-19 center_middle 效果 图 


XHTML 代码 如 下 : 
<div class= "centerulli"> 
<u> 

<Il> 


a href="#"><img src 一 "images/BookCovers/1.jpg" alt="" /></a> 
< 于 h5 二 一 a href 一 "# ”class 一 "centerullititle" 之 Effective ASP. NET 中 文 版 过 /a 这 三 /h5 
<p class= "centerulliprice"><span class= "delprice" > ¥49.0</span> 
<span> ¥28.0</span></p> 
</l> 
< 一 li 一 
<a href="#"><img src 一 "images/BookCovers/2.jpg" alt="" /></a> 
二 h5 这 过 a href 一 "#" class 二 "centerullititle" 之 C# 中 文 版 这 一 /a> 一 /h5> 
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<p class= "centerulliprice" ><span class= "delprice">¥39.0</span> 
<span> ¥27.0</span></p> 

</l> 

<li> 
<a href="#"><img src 一 "images/BookCovers/3.jpg" alt="" /></a> 
=h5><a href="#" class= "centerullititle" >Effective ASP. NET 中 文 版 二 /a 二 /h5> 
<p class= "centerulliprice" > <span class= "delprice"> ¥49.0</span> 
<span> ¥28.0</span></p> 

</l> 

<li> 
~<a href="#"><img src="images/BookCovers/4.jpg" alt="" /></a> 
二 h5 二 <a href 一 " 井 ” class 一 "centerullititle" 之 C# 中 文 版 <</a 二 <</h5 二 
<p class= "centerulliprice" > <span class= "delprice"> ¥ 39.0</span> 
<span> ¥27.0</span></p> 

</l> 

<> 
<a href="#"><img src="images/BookCovers/5.jpg" alt="" /></a> 
=h5><a href="#" class 一 "centerullititle" 之 Effective ASP. NET 中 文 版 二 /a 二 </h5 二 
<p class= "centerulliprice"><span class= "delprice"> ¥ 49.0</span> 
<span> ¥28.0</span></p> 

</l> 

<li> 
<a href="#"><img src 一 "images/BookCovers/6.jpg" alt="" /></a> 
<<h5 之 一 a href 一 "# 井 ”class 一 "centerullititle" 之 C# 中 文 版 </a 二 二 /h5 二 
<p class 一 "centerulliprice" 之 一 span class= "delprice" > ¥ 39.0</span> 
<span> ¥27.0</span></Pp> 

</li> 

<li> 
<a href="#"><img src="images/BookCovers/7.jpg" alt="" /></a> 
=h5><a href="#" class="centerullititle" >Effective ASP. NET 中 文 版 <</a</h5 二 
<p class="centerulliprice"><span class="delprice" > ¥49.0</span> 
<span> ¥28.0</span></p> 

</li> 

<li> 
<a href="#"><img src 一 "images/BookCovers/8.jpg" alt="" /></a> 
< 到 h5 之 一 a href 一 "# ”class 一 "centerullititle" 之 C# 中 文 版 <</a 二 二 /h5 二 
=p class 王 "centerulliprice" 之 一 span class= "delprice"> ¥ 39.0</span> 
<span> ¥27.0</span></p> 

i 


</u> 
</div> 


(3) 从 图 6-20 可 以 看 出 ,center_footer 部 分 的 搭建 方法 和 center_top 类 似 。 
XHTML 代码 如 下 : 


<div class= "center footer"> 


div class= "centertopclass"> 
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<u> 
过 li class 王 "centertopullione" 之 本 周 媒体 热点 最 热 图 书 ,全 场 打折 ,天 天 特价 二 /li 二 
<li class 一 "centertopullitwo" 之 一 a href="#"> 更 多 &gt; &gt;</a></li> 
</u> 
</div> 
<div class= "centerimg"> 
<a href="#" ><img src="images/BookCovers/9787115158284_new.jpg" 
height="349" width="200" alt="" /></a> 
二 h5<a href 一 "# "之 Effective C# 中 文 版 改善 C# 程 序 的 50 种 方法 <</a 之 和 </h5> 
去 p> 作 者 : ( 美 ) 米 切 尔 </p 二 
去 p> 出 版 社 : 人 民 邮 电 出 版 社 三 /p 二 
二 p 二 出 版 时 间 : 2007-05-01 一 /p> 
二 p 之 二 span class 一 "spanone" 盖 定价 : 闺 49 元 一 /span 盖 
二 span class 二 "spantwo" 之 折扣 价 : 圣 38 元 二 /span 二 
过 span class 一 "spanthree" 之 折扣 : 75 折 王 /span 一 /p> 
三 h5 二 媒体 评论 :过 /h5 
二 p>ASP.NET 2.0 在 1.0 版 的 基础 上 做 了 很 多 改进 ,用 它 可 以 更 容易 地 创建 数据 驱动 
的 网 站 。 本 书 通过 简明 的 语言 和 详细 的 步骤 ,以 循序 渐进 的 方式 帮助 读者 迅速 掌握 使 
用 ASP.NET 2.0 开发 网 站 所 需 的 基本 知识 。 志 /p> 
<p 二 全 书 共 分 5 个 部 分 , 共 24 章 。 第 一 部 分 介绍 了 ASP. NET 2.0 及 其 编程 模型 ， 
Visual Web...</p> 
</div> 
</div> 


了 本 周 媒体 热点 最 热 图 书 ， 全 场 打折 、 天 天 特价 ! 详情 六 
Effective C# 中 文 版 改善 c# 程 序 的 50 种 方法 

作者 :【 美 ) 米 切 尔 

出 版 社 : 人 民 邮 电 出 版 社 

加 ”出 版 日 期 : 2007-05-01 


完 符 半 49 ”折扣 价 : ¥38 ”折扣 : 75 折 
媒体 评论 : 

ASP. RET 2_0 在 1.0 版 的 基础 上 做 了 很 多 改进 ,用 它 可 以 更 容易 地 创建 数据 驱动 的 网 
站 。 相 书 通过 简明 的 语言 和 详细 的 步骤 ， 以 循序 渐进 的 方式 帮助 读者 迅速 学 握 使 用 ASP. NET 
2.0 开 发 网 站 所 需 的 基本 知识 。 

全 书 共 分 5 个 部 分 ， 共 24 章 。 第 一 部 分 介绍 了 ASPF. HET 2. 0 及 其 编程 模型 ，Visusl 


图 6-20 ”center_footer 效果 图 


6.3.6 首页 footer 区 域 XHTML 模块 结构 


footer 区 域 的 结构 如 图 6-21 所 示 。 

从 图 6-21 可 以 看 出 ,footer 部 分 可 以 分 为 两 个 块 , 一 个 是 上 面 的 图 片 footer_banner， 
一 个 是 下 面 的 footer_bottom。 人 符号 的 代码 为 *&copy;”, 可 以 在 Dreamweaver 设计 视 
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footer_banner -一 | 享受 网 购 乐趣 , 穴 在 


footer_bottom 一 | 一 Crit © EF atagog， Al Rights aaavet Forered By Croatsott ca 9 Wcities 


图 6-21 footer 效果 图 


图 中 打开 “文本 ”工具 栏 , 单 击 最 后 一 个 符号 标签 ,在 打开 的 下 拉 菜 单 中 选择 “版 权 ” 符 
号 ,如 图 6-22 和 图 6-23 所 示 。 


文本 MBI|SenT hImh hh uo i|d dt dd|abr wc| 


图 6-22 “文本 ”工具 栏 


紧 |, 
最 | 换行 符 Ghift + Enter) 
志 不 执行 空格 

5 左 引 号 

”9 右 引 号 

一 破 折线 

全 英镑 符号 

万 欧元 符号 

羊 日 元 符号 

回 版 权 

因 注册 商标 

Tv 商标 


团 其 他 字符 
6-23 选择 版 权 符号 
footer 部 分 XHTML 代码 如 下 : 


div class= "footer"> 
<div class= "footer_banner"> <img src 一 "images/index_end.png" width 一 "982" 
height="80" alt="" /></div> 
=<div class= "footer_bottom"> 
Copyright <span> <span> &copy; </span></span> 
叮当 网 2012-2014，All Rights Reserved. Powered By GreatSoft Corp. &nbsp;&nbsp; 
<img src 一 "images/validate. gif" align 一 "absmiddle" alt="" />&nbsp; &nbsp; 苏 
a href 一 "#"” _ target 一 ”blank" 之 ICP 证 041100 号 一 /a> 
</div> 
</div> 


64 任务 拓展 


对 于 “叮当 网 上 书店 ”其 他 页 面 图 书 分 类 页 .图 书 详细 页 .图书 登录 页 ,请 大 家 根据 效 
果 图 选择 合适 的 标签 ,认真 独立 完成 效果 。 
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6.4.1 图 书 分 类 页 XHTML 总 体 结构 


图 书 分 类 页 XHTML 总 体 结构 如 图 6-24 所 示 。 


四 雪 网 EDEHE Ys | anaz Rae | ne | Ba 
EE 


Del NN Was Se A 
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区] 77] 癌 夯 苹 
TH 竹 
me 
田 吧 
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图 oi/ Veen 
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四 mow 二 en 
ep 全 

INNER HER 


Yn yt gn: sf Ti: 0 EY ECE 


国 匣 
加 wd 

D 电子 而 

ED HS 
加 hate 


ee en aoose sanivbnt | | 与 主页 的 不 同 处 : 采 
pnb 件 、45P ET 0 Won 间接 析 、45P = 哺 室 、M 1 格式 和 分 区 式 灶 和 几 人 、437 和 2 0 条 用 img、p、a、span 
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DO windm 人 者， ( 半 ) 于 才 (meerevi, 5 】 基 ， 才 科 ， 因 区 天 睹 六 这 
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图 6-24 图 书 分 类 页 XHTML 总 体 结构 


从 图 6-24 可 以 看 出 ,整个 版 面 和 主页 有 些 类 似 ,也 是 上 中 下 结构 。 与 主页 的 不 同 处 
如 图 6-24 所 示 。 可 以 在 主页 的 基础 上 修改 代码 ,不 同 处 的 XHTML 代码 如 下 : 


=<div class= "list_right"> 
=<div class= "list_r_top"> 
二 div class 二 "list_r_toptext" 排 序 方式 
<img src="./images/class/icon_sanjiao_black. gif" /><=/div> 
过!-- 排 序 -- 二 
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=span class= "list_r_toporder"> 
=a href="#" ><img src 一 './images/class/icon_xiaoshou_r.gif' /></a> 
<a href="#" ><img src 一 './images/class/icon_jiaqian.gif' /之 =/a> 
<a href="#" ><img src="./images/class/icon_zhekou. gif' /></a> 
<a href="#" ><img src 一 './images/class/icon_shijian2.gif' /></a> 
<a href="#" ><img src 一 './images/class/icon_chuban2.gif' /></a> 
</span> 
</div> 
雪上 -列表 B -> 
<div class= "list_r_list"> 
<div class= "list_book_1"> 
span class="pic"> <a href="#" target="_blank"> 
<img src= "images/BookCovers/9171366.jpg" border="0"/></a> 
</span> </div> 
<div class= "list_book_r"> 
二 h2>> <a href 一 "# "ASP.NET 2.0 服务 器 控件 与 组 件 开发 高 级 编程 </a> <=/h2 
去 p> 顾 客 评分 : 
<img src='./images/class/dot_xing. gif' /> 


<img src='./images/class/dot_xing. gif' /> 
<img src="./images/class/dot_xing. gif' /> 
< 一 img src 一 './images/class/dot_xing.gif' /> 


<img src 一 './images/class/dot_xing2.gif' /二 </p> 
去 p> 作 者 :一 span>( 美 ) 库 斯 拉 维 (Khosravi,S.) 著 , 郝 刚 ,田亮 君 , 陈 文 </span> 译 <</p> 
过 p class 一 "]" 盖 出 版 社 : 一 a href 一 "# "二 LHB 出 版 社 一 /a 之 二 /p> 
过 p class 一 "]" 二 出 版 时 间 :2010 年 08 月 一 /p> 
二 p class 二 "t" 二 本 书 是 一 本 专门 介绍 服务 器 控件 和 组 件 的 开发 与 使 用 的 图 书 .全 书 共 分 
为 33 章 ,分 别 介绍 了 Ajax 控件 和 组 件 .ASP. NET 2.0 Web 部 件 控件 、 
ASP. NET 2.0 安全 、ASP. NET 2.0 表格 式 和 分 层 式 数据 源 控件 .ASP 
.NET 2.0 表格 式 数据 绑 定 控件 、 自 定义 架构 导入 扩展 和 ISeriali... 
</p> 
<p class="s"><span class="del"><s>¥24.80</s></span> 
二 span class 一 "red" 之 半 14.60 一 /span> 折扣 :59 折 节省 : 圣 10.20 </p 二 
span class="goushou"> <a href="#"> 
<img src='. /images/class/but_buy. gif' title= ' 购 买 ' /过 ></a> </span> 
二 span class= "goushou"> ~<a href="#"> 
<img src="./images/class/but_put. gif" title= "收藏 " /二 </a> </span> 
</div> 
</div> 
<div class= "list_r_ list"> 
<=div class= "list_book_1"> 
=span class="pic"> 
a href="#" target="_blank"> 
<img src= "images/BookCovers/9171366.jpg" border="0"/></a> 
</span> 
</div> 
<div class= "list_book_r"> 
到 h2>> <a href 一 "#" 之 ASP.NET 2.0 服务 器 控件 与 组 件 开发 高 级 编程 </a </h2 二 
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去 p> 顾 客 评分 : 
<img src 一 './images/class/dot_xing.gif' /> 
<img src="./images/class/dot_xing. gif' /> 
<img src="./images/class/dot_xing. gif' /> 
<img src="./images/class/dot_xing. gif' /> 
<img src="./images/class/dot_xing2.gif'/> </p> 
< 一 p> 作 者 :一 span>( 美 ) 库 斯 拉 维 (Khosravi,S.) 著 , 郝 刚 ,田亮 君 , 陈 文 </span> 译 过 /p 二 
过 p class 一 "] "二 出 版 社 :一 a href 一 "# "之 LHB 出 版 社 一 /a>> 二 /p> 
过 p class 一 "]" 盖 出 版 时 间 :2010 年 08 月 一 /p> 
过 p class 一 "t" 盖 本 书 是 一 本 专门 介绍 服务 器 控件 和 组 件 的 开发 与 使 用 的 图 书 . 全 书 共 分 
为 33 章 ,分 别 介绍 了 Ajax 控件 和 组 件 .ASP.NET 2.0 Web 部 件 控件 、 
ASP. NET 2.0 安全 、ASP. NET 2.0 表格 式 和 分 层 式 数据 源 控件 .ASP 
.NET 2.0 表格 式 数据 绑 定 控件 . 自 定 义 架 构 导 和 人 扩展 和 ISeriali... 
</p> 
<p class="s"><span class="del"><s> ¥24.80</s></span> 
之 span class 一 "red" 全 著 14.60 一 /span> 折扣 :59 折 节省 : 圣 10.20 二 /p> 
span class="goushou"> <a href="#"> 
<img src='./images/class/but_buy. gif' title= ' 购 买 '/ 盖 一 /a> </span> 
一 span class="goushou"> ~<a href="#"> 
<img src="./images/class/but_put. gif"” title= "收藏 " /过 
</a> </span> 


</div> 


<div class= "list_r_list"> 
<div class= "list_book_1"> 


<span class="pic"> <a href="#" target="_blank"> 
<img src= "images/BookCovers/9171366.jpg" border="0"/></a> 
</span> </div> 


<div class= "list_book_r"> 


到 h2>> a href 二 "#" 这 ASP. NET 2.0 服务 器 控件 与 组 件 开发 高 级 编程 一 /a> 二 /h2 二 
去 p> 顾 客 评分 : 
< 一 img src 一 './images/class/dot_xing.gif' /> 
<img src='./images/class/dot_xing. gif' /> 
<img src='./images/class/dot_xing. gif' /> 
<img src 一 './images/class/dot_xing.gif' /> 
<img src 一 './images/class/dot_xing2.gif' /> </p> 
< 一 p 二 作者 :一 span>( 美 ) 库 斯 拉 维 (Khosravi,S.) 著 , 郝 刚 ,田亮 君 , 陈 文 一 /span 二 
译 一 /p> 
过 p class 一 "]" 盖 出 版 社 : 一 a href 一 "# "二 LHB 出 版 社 一 /a> 王 /p> 
过 p class 一 "]" 过 出 版 时 间 :2010 年 08 月 一 /p> 
二 p class 二 "t" 二 本 书 是 一 本 专门 介绍 服务 器 控件 和 组 件 的 开发 与 使 用 的 图 书 .全 书 共 分 
为 33 章 ,分 别 介绍 了 Ajax 控件 和 组 件 .ASP.NET 2.0 Web 部 件 控件 、 
ASP. NET 2.0 安全 、ASP. NET 2.0 表格 式 和 分 层 式 数据 源 控件 .ASP 
.NET 2.0 表格 式 数 据 绑 定 控件 . 自 定义 架构 导入 扩展 和 ISeriali.. . 
</p> 
<p class="s"><span class="del"><s>¥24.80</s></span> 
span class= "red">¥14.60</span> 
折扣 :59 折 节省 : 圣 10.20 过/p 二 
=span class= "goushou"> 
<a href="#" ><img src='./images/class/but_buy. gif' title= ' 购 买 ' /二 二 /a 
</span> 


任务 6 | 


< 二 span class= "goushou"> 
~<a href="#" ><img src 一 "./images/class/but_put.gif" title= "收藏 " /过 
</a> </span> 
</div> 
</div> 
<div class= "list_r list"> 
<=div class= "list_book_1"> 
=span class 一 
~<a href="#" target="_blank"> 
<img src= "images/ BookCovers/9171366.jpg" border="0"/></a> </span> 


</div> 
一 div class= "list_book_r"> 
二 h2>> a href 一 "# "之 ASP.NET 2.0 服务 器 控件 与 组 件 开发 高 级 编程 一 /a> 二 /h2 二 
一 p 二 顾客 评分 :过 img src 一 '. /images/class/dot_xing.gif' /之 
images/class/dot_xing. gif' /> 
images/class/dot_xing. gif' /> 
images/class/dot_xing. gif' /> 
<img src='./images/class/dot_xing2.gif' /> </p> 
一 p> 作 者 :一 span>( 美 ) 库 斯 拉 维 (Khosravi,S.) 著 , 郝 刚 ,田亮 君 , 陈 文 ”二 /span> 
译 </p> 
过 p class 一 "]" 之 出 版 社 : 一 a href 一 "# ”>>LHB 出 版 社 一 /a 之 一/p>> 
过 p class 一 "]" 之 出 版 时 间 :2010 年 08 月 一 /p> 
二 p class 二 "t" 二 本 书 是 一 本 专门 介绍 服务 器 控件 和 组 件 的 开发 与 使 用 的 图 书 .全 书 共 分 
为 33 章 ,分 别 介绍 了 Ajax 控件 和 组 件 、ASP. NET 2.0 Web 部 件 控件 、 
ASP. NET 2.0 安全 、ASP. NET 2.0 表格 式 和 分 层 式 数据 源 控件 .ASP 
.NET 2.0 表格 式 数据 绑 定 控件 . 自 定 义 架构 导入 扩展 和 ISeriali... 
</p> 
<p class="s"><span class="del"><s>¥24.80</s></span> 
过 span class 二 "red" 这 竺 14.60 二 /span>> 折扣 :59 折 节省 :10.20 二 /p> 
<span class= "goushou"> <a href="#"> 
<img src='./images/class/but_buy. gif' title= ' 购 买 '/ 才 </a> </span> 
=span class= "goushou"> 
<a href="#" ><img src="./images/class/but_put. gif" title=" 收 藏 " /二 </a> 
</span> 
</div> 
</div> 
<div class="pages"> 
<=div class= "mode_turn_page’> 
=span class="prev2"> 
过 a href 一 "# ”class 一 "num" 过 第 一 页 一 /a> 一 /span> 
<span class= "num_now">1</span> 
<span><a href="#" class="num">2</a></span> 
=<span><a href="#" class="num">3</a></span><span>... 
</span><span> <a href="#" class="num">49</a></span><span> 
<a href="#" class="num">50</a></span> 
二 span class 一 "next" 之 一 a href 一 "# ”class 一 "num" 过 最 后 一 页 一 /a 王 /span 二 
二 span class 一 "t_text" 之 跳 转 到 一 /span 过 
<input type= "text" class= "tiaozhuan" value="1" /> 
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二 span class 一 "t_text" 盖 页 一 /span> 二 span class 一 "enter" 一 
<a href="#" >Go</a> </span> </div> 
</div> 
</div> 


4.2 图 书 详细 页 XHTML 总 体 结构 


图 书 详细 页 效果 如 图 6-25 所 示 。 


呆 当 网 me pies | at | SBP | EPE | 


ne Ce | Asp MET | SQL Server 


叮当 图 地 国 可 提要 要 : 护理 ! 热 拉 。 执 嫂 。 热 撞 4 执 于 5 执 扫 8 热 搜 7 
您 现 在 的 位 置 : 呆 当 癌 >) [加 书信 去 》》 列表 G255) 
oy 痉 六 奖 奖 育 
新 书 推荐 b 美 ) 库 斯 拉 娘 ( Ehosravi ,5 ) 著 ， 和 则 ,田亮 略 , 陈 文洋 
me nt 
困 ,可 本 书 是 一 本 专门 介绍 及 务 器 控件 和 棚 牢 的 开发 与 合用 的 图 节 。 全书 共 分 为 3 意 ， 分别 介 雪 了 人 控件 和 组件 、AsF. JET 2.0 Yob 
f 部 人 控 伞 、ASP JET 2 0 安全 ，ASF 二 1 2 0 于 格式 和 分 是 式 数落 尖 乏 件 ，ASF ET 2.0 表 格式 数据 旭 定 控件 、 自 定义 架构 导入 扩 
四 Ar mr 和 
14 60 折扣 : 3 折 节省 : 10.20 
国 Basie/yBvaseript Ey 
加 cucnmcmcr 
/Dn 
ponding 于 opm ser 的 是， 他人 4、 再 、 人 有 cgs 计 、 寺 二 进 抽 人 人 有， 刘 寺 了 弛 oso 个 是 
ED wm gp 这 和 全 
党 习 书 中 的 内 容 ,为 在 不 风 人 名 下 使 用 最 佳 检 提供 指导 。 
mr A 抽风 ， 风 时 皇上 和 病人 下 罗江 和 er/ 的 帮 岳 》， 作 为 C4 和 9 对 蔬 ， 
图 IJweewipVJw MT ET 专 容 ， 补 软 Ce 久 域 9gVP ， 并 荣获 福 软 Rheeienal Director 称 号 Ep Salti en 的 人 el 
四 邓 件 开 l 凶 导 了 次 克成 功 Nindors 平 台 严 品 的 开发 。 己 是 视 软 开发 社区 的 活路 人 yc 
人大 让 生生 ri fetter ot rh ni el ne 
Eh wam 
， 讲 寻 从 居 和 到 章 姑 的 科 讼 ,一 C 检 
加 电子 机 务 机， 我 本人 已 内 以 91 的 关 作 中 六 多 ， 
国 计 臣 机 等 如 考区 ve CH+ 作 淖 ， 世 界 组 面 问 对 登 技术 专 畦 
Di 机 理论 ly Eh leet tap Wr hd rl 
有 经验 ， 银 沁 地 沈 用 了 不 恰当 的 近 与 贞 同 时 ， 随 看 数 年 Ca 运 应 用 ， 业界 在 殉 分 和 用 cfg 斌 大 功能 办 生 块 速 ， 高 效 和 | 
加 zl 的 程序 方面 积 轩 了 二 富 的 最 
当天 伟 扩 ， 用 真实 的 人 到 于 全 ， 通 过 活 、RN 取 和 和 明 
ED 开发 及 ， 以 条 革 格 式 为 广大 程序 员 提 洪波 到 了 业 异 经 对 结 吕 的 志和 巡 汉 


6-25 图 书 详细 页 效果 


从 图 6-25 可 以 看 出 ,中 间 和 右边 部 分 与 主页 不 同 , 可 以 通过 img .hz 等 标签 实现 。 
XHTML 代码 如 下 : 


< 一 div class= "yposition"> 
到 b> 您 现在 的 位 置 : 到 /b><<a href 一 "index.html" 之 叮当 网 一 /a> &gt; &gt; 
过 a href 一 "class.html" 过 图 书 分 类 <</a>> &gt; &gt; 
二 span 记 列表 ( 共 295)</span> 
</div> 
去 上 -图 书 列表 右边 B- -之 
<div class="book"> 
div class= "book_left"> 
<div class= "gtit"> 
<span class= "gleft"></span> <span class="grig"></span> 
过 h2 class 二 "col_w129" 志 图 书 过 /h2 二 
</div> 
<div class= "glist"> 
<u> 
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li class 一 "lititle" 之 一 a href 一 "class.html" 过 新 书 推荐 一 /a> 志 /1 
<li><a href="class.html">C#</a></li> 
<li><a href="class.html"> .NET</a></l> 
<li><a href="class. html"> ASP. NET</a></li> 
<=li><a href= "class. html"> Basic/VB/VBScript</a></li> 
<li><a href="class. html">C/C++/VC/VC++</a></l> 
<li><a href="class.html">CSS/DIV</a></l> 
<li><a href= "class.html">HTML/XML</a></l> 
<li><a href="class. html">J2EE</a></l> 
<li><a href= "class. html"> JavaScript/Java</a></li> 
<li><a href= "class. html">JSP</a></li> 
<li><a href="class. html"> Windows</a></li> 
过 li> 过 a href 一 "class.html" 过 电子 商务 一 /a 之 一 /li 
<<1i 这 <<a href 二 "class.html" 二 计算 机 等 级 考试 </a 二 </li> 
过 li><a href="class.html" 二 计算 机 理论 过 /a 二 </li>> 
li><a href 一 "class.html" 之 其 他 一 /a> 一 /1 
<<li 盖 <<a href 一 "class.html" 之 网 站 开发 二 /a> 
<li><a href="class.html">C/C++/VC/VC++</a></li> 
<li><a href="class.html">CSS/DIV</a></li> 
<li><a href lass.html">HTML/XML<=/a></li> 
<li><a href="class. html">J2EE</a></li> 
<li><a href= "class. html">JavaScript/Java</a></li> 
<li><a href="class. html">JSP</a></li> 
<li><a href="class.html"> Windows</a></li> 
二 li 这 过 a href="class.html" 才 电子 商务 三 /a 二 <</l 旋 
</li> 
</u> 
</div> 
<span class="blank8"></span> 
<div class= "gtit"> <span class= "gleft"></span> 
<span class= "grig"></span> 
二 h2 class 二 "col_w129" 二 品牌 出 版 社 三 /h2 二 
</div> 
<div class= "glist1"> 
<u> 
过 li><<a href 一 "class.html" 之 贵州 人 民 出 版 社 一 /a> 王 /li 
过 li 之 a href 一 "class.html" 之 贵州 人 民 出 版 社 一 /a>> 王 /li 
过 li> 过 a href 王 "class.html" 过 贵州 人 民 出 版 社 一 /a> 一 /1 
过 li><<a href 王 "class.html" 之 贵州 人 民 出 版 社 一 /a> 二 /li 
过 li> 过 a href 一 "class.html" 过 贵州 人 民 出 版 社 一 /a> 一 /1 
过 li> 过 a href 一 "class.html" 过 贵州 人 民 出 版 社 一 /a> 王 /1 
< 一 li 这 二 a href 王 "class.html" 之 贵州 人 民 出 版 社 忆 /a> 一 /1 
过 li> 过 a href 一 "class.html" 过 贵州 人 民 出 版 社 一 /a> 一 /li 
<<l 这 <<a href 一 "class.html" 之 贵州 人 民 出 版 社 一 /a> 王 /li 
<<l 这 <<a href 一 "class.html" 之 贵州 人 民 出 版 社 一 /a> 王 /li 
< 一] 一 a href 王 "class.html" 之 贵州 人 民 出 版 社 一 /a>> 一 /1 
<<li 这 <<a href 一 "class.html" 过 贵州 人 民 出 版 社 一 /a> 王 /Li 
去 /ul> 
</div> 
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</div> 
<div class= "class_wrap"> 
<=div class= "list_right"> 
二 !-- 列 表 了 -> 
<div class= "list_r list"> 
<div class= "list_book_1"> 
二 span class="pic"><a href="#" target="_blank"> 
img src= "images/ BookCovers/9171366.jpg” border="0"/></a> 
</span> 
</div> 
<div class= "list_book_r"> 
到 h2>> <a href 一 "#" 之 ASP.NET 2.0 服务 器 控件 与 组 件 开发 高 级 编程 /a 二 
</h2> 
二 p 二 顾客 评分 : 
<img src 一 './images/class/dot_xing.gif' /> 
<img src 一 './images/class/dot_xing.gif' /> 
<img src 一 './images/class/dot_xing.gif' /> 
< 一 img src 一 './images/class/dot_xing.gif' /> 
<img src 一 './images/class/dot_xing2.gif' /> =</p> 
过 p 记 作者 : 
二 span 之 ( 美 ) 库 斯 拉 维 (Khosravi, S. ) 著 , 郝 刚 , 田亮 君 , 陈 文 一 /span> 译 
</p> 
二 p class 二 "1" 二 出 版 社 : 二 a href="# "之 LHB 出 版 社 一 /a 之 一 /p> 
过 p class 二 "I" 过 出 版 时 间 : 2010 年 08 月 </p 二 
去 p class 二 "t" 二 本 书 是 一 本 专门 介绍 服务 器 控件 和 组 件 的 开发 与 使 用 的 图 书 。 
全 书 共 分 为 33 章 ,分 别 介绍 了 Ajax 控件 和 组 件 、ASP. NET 
2.0 Web 部 件 控件 .ASP. NET 2.0 安全 、ASP. NET 2.0 表格 
式 和 分 层 式 数据 源 控件 .ASP. NET 2.0 表格 式 数据 绑 定 控件 、 
自 定义 架构 导入 扩展 和 ISeriali.…<</p> 
<p class="s"><span class="del"><s>¥24.80</s></span> 
二 span class 一 "red" 二 于 14.60 一 /span> 折扣 : 59 折 节省 : 圣 10.20 二 /p 二 
=span class= "goushou"> 
<a href="#" ><img src='./images/class/but_buy. gif' title= ' 购 买 ' /> 
</a> </span> 
=span class= "goushou"> 
<a href="#" ><img src="./images/class/but_put. gif" 
title= "收藏" /六 <</a> 二 /span> 


</div> 
</div> 
<div class= "list_box"> 
二 h3 二 内 容 提要 :</h3 二 
二 p 二 本 书 围绕 一 些 关 于 C# 和 .NET 的 重要 主题 ,包括 C# 语 言 元 素 、. NET 资源 
管理 ,使 用 C# 表达 设计 、 创 建 二 进 制 组 件 和 使 用 框架 等 ,讲述 了 最 常见 的 
50 个 问题 的 解决 方案 ,为 程序 员 提供 了 改善 C 井 和 .NET 程序 的 方法 。 本 书 通 
过 将 每 个 条 款 构建 在 之 前 的 条 款 之 上 ,并 合理 地 利用 之 前 的 条 款 ,来 让 读者 最 
大 限度 地 学 习 书 中 的 内 容 ,为 其 在 不 同情 况 下 使 用 最 佳 构 造 提供 指导 。<br 二 
本 书 适合 各 层次 的 C# 程 序 员 阅读 ,同时 可 以 推荐 给 高 校 教师 (尤其 是 软件 学 
院 教授 C#/.NET 课程 的 老师 ) ,作为 C# 双语 教学 的 参考 书 。<=/p 二 
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</div> 
div class= "list_box"> 
二 h3 二 作者 简介 :</h3 二 
去 p 之 Wagner 是 世界 知名 的 . NET 专家 , 微软 C# 领域 的 MVP, 并 荣获 微软 
Regional Director 称号 。 他 是 著名 软件 咨询 公司 SRT Solutions 的 创始 人 ， 
有 20 多 年 软件 开发 经 验 , 曾经 领导 了 众多 成 功 的 Windows 平台 产品 的 开 
发 。 他 是 微软 开发 社区 的 活跃 人 物 , 长 期 担任 MSDN Magazine、ASP. NET 
Pro、Visual Studio 一 a href 二 "mailto: Magazine 等 技术 杂志 的 专栏 作者 。 他 
的 Blog 是 http: //www. srtsolutions. com/public/blog/20574, 可 以 通过 
wwagner@SR7Solutions.com 与 他 联系 " Magazine 等 技术 杂志 的 专栏 作 
者 。 他 的 Blog 是 http: //www. srtsolutions. com/public/blog/20574, 可 以 
通过 wwagner@SR7Solutions. com 与 他 联系 一 /a>。 志 /p> 
</div> 
<div class= "list_box"> 
二 h3 二 编辑 推荐 :二 /bh3 二 
二 p 二 业界 专家 经 验 荟 芋 , 讲 述 从 优秀 到 卓越 的 秘诀 ,涵盖 C#2.0。 二 br 二 "一 直 以 
来 ,读者 们 总 在 不 停 地 问 我 ,什么 时 候 写 Effective C#? 本 书 的 出 版 使 我 如 释 
重负 。 令 人 高 兴 的 是 ,我 本 人 已 经 从 阅读 Bill 的 著作 中 获 益 良 多 ,相信 读者 也 
会 和 我 一 样 。"<<br> 
一 一 Scott Meyers, Effective C++ 作 者 ,世界 级 面向 对 象 技术 专家 二 br 二 
C# 与 Ct+ ,Java 等 语言 的 相似 性 大 大 降低 了 学 习 难 度 。 但 是 ,C# 所 具有 的 
大 量 独特 的 特性 和 实现 细节 。 有 时 又 会 使 程序 员 适得其反 : 他 们 往往 根据 既 
有 经 验 ,错误 地 选用 了 不 恰当 的 技术 。 从 而 导致 各 种 问题 。 与 此 同时 , 随 着 数 
年 来 C# 的 广泛 应 用 ,业界 在 充分 利用 C# 的 强大 功能 编写 快速 ,高效 和 可 靠 
的 程序 方面 也 积累 了 丰富 的 最 佳 实 践 。 二 br> 
本 书 秉承 了 Scott Meyers 的 Effective C++ 和 Joshua Bloch 的 Effective 
Java 所 开创 的 伟大 传统 .用 真实 的 代码 示例 ,通过 清晰 ,贴近 实际 和 简明 的 阐 
述 ,以 条 款 格式 为 广大 程序 员 提供 凝聚 了 业界 经 验 结晶 的 专家 建议 。 王 br> 
本 书 中 ,著名 .NET 专家 Bill Wagner 就 如 何 高 效 地 使 用 C# 语 言 和 .NET 库 。 
围绕 C# 语 言 元 素 、. NET 资源 管理 ,使 用 C# 表达 设计 、 创 建 二 进 制 组 件 和 使 
用 框架 等 重要 主题 ,讲述 了 如 何在 不 同情 况 下 使 用 最 佳 的 语言 构造 和 惯用 法 ， 
同时 避免 常见 的 性 能 和 可 靠 性 问题 。 其 中 许多 建议 读者 都 可 以 举一反三 , 立 
即 应 用 到 自己 的 日 常 编程 工作 中 去 。 到 /p> 
</div> 
所 div class= "list_box"> 
二 h3 二 目录 :</h3 二 
去 p> 第 1 章 C# 语 言 元 素 <br> 
条 款 1: 使 用 属性 代替 可 访问 的 数据 成 员 二 br 二 
条 款 2: 运行 时 常量 (readonly) 优 于 编译 时 常量 (const) 二 br 
条 款 3: 操作 符 is 或 as 优 于 强制 转型 br 二 
条 款 4: 使 用 Conditional 特性 代替 # 让 条 件 编译 二 br 二 
条 款 5: 总 是 提供 ToString() 方 法 过 br 二 
条 款 6: 明 辨 值 类 型 和 引用 类 型 的 使 用 场合 二 br 二 
条 款 7: 将 值 类 型 尽 可 能 实现 为 具有 常量 性 和 原子 性 的 类 型 <br 二 
条 款 8: 确保 0 为 值 类 型 的 有 效 状态 <br 二 
条 款 9: 理解 几 个 相等 判断 之 间 的 关系 二 br 二 
条 款 10: 理解 GetHashCode() 方 法 的 缺陷 二 br 
条 款 11: 优先 采用 foreach 循环 语句 二 br 二 
第 2 章 .NET 资源 管理 <br 二 
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条 款 12: 变量 初始 化 器 优 于 赋值 语句 二 br 二 

条 款 13: 使 用 静态 构造 器 初始 化 静态 类 成 员 二 br 二 
条 款 14: 利用 构造 器 链 一 br 

条 款 15: 利用 using 和 try/finally 语句 来 清理 资源 二 br 二 
条 款 16: 尽量 减少 内 存 垃圾 br 二 

条 款 17: 尽量 减少 装 箱 与 拆 箱 二 br 二 

条 款 18: 实现 标准 Dispose 模式 二 br 二 

第 3 章 使 用 C# 表 达 设 计 <br 二 

条 款 19: 定义 并 实现 接口 优 于 继承 类 型 <br 二 

条 款 20: 明 辨 接口 实现 和 虚 方法 重 写 王 br> 

条 款 21: 使 用 委托 表达 回调 二 br 二 

条 款 22: 使 用 事件 定义 外 发 接口 <br 二 

条 款 23: 避免 返回 内 部 类 对 象 的 引用 二 br 二 

条 款 24: 声明 式 编程 优 于 命令 式 编程 二 br 二 

条 款 25: 尽 可 能 将 类 型 实现 为 可 序列 化 的 类 型 <br 二 
条 款 26: 使 用 IComparable 和 IComparer 接口 实现 排序 关系 二 br 二 
条 款 27: 避免 ICloneable 接口 二 br 二 

条 款 28: 避免 强制 转换 操作 符 二 br 二 

条 款 29: 只 有 当 新 版 基 类 导致 问题 时 才 考 虑 使 用 new 修饰 符 二 br 二 
第 4 章 创建 二 进 制 组 件 一 br 

条 款 30: 尽 可 能 实现 CLS 兼容 的 程序 集 二 br 

条 款 31: 尽 可 能 实现 短小 简洁 的 函数 二 br 二 

条 款 32: 尽 可 能 实现 小 尺寸 高 内 聚 的 程序 集 <br 二 
条 款 33: 限制 类 型 的 可 见 性 二 br 二 

条 款 34: 创建 大 粒度 的 Web API<br> 

第 5 章 使 用 框架 二 br> 

条 款 35: 重 写 优 于 事件 处 理 器 二 br 

条 款 36: 合理 使 用 .NET 运行 时 诊断 二 br 二 

条 款 37: 使 用 标准 配置 机 制 二 br 二 

条 款 38: 定制 和 支持 数据 绑 定 一 br> 

条 款 39: 使 用 .NET 验证 二 br 

条 款 40: 根据 需要 选用 恰当 的 集合 <<br> 

条 款 41: DataSet 优 于 自 定义 结构 二 br 二 

条 款 42: 利用 特性 简化 反射 <br 二 

条 款 43: 避免 过 度 使 用 反射 <br 二 

条 款 44: 为 应 用 程序 创建 特定 的 异常 类 二 br 二 第 6 章 杂项 讨论 二 br 二 
条 款 45: 优先 选择 强 异常 安全 保证 二 br 二 

条 款 46: 最 小 化 互 操作 一 br> 

条 款 47: 优先 选择 安全 代码 br 二 

条 款 48: 掌握 相关 工具 与 资源 一 br> 

条 款 49: 为 C# 2.0 做 准备 二 br 二 

条 款 50: 了 解 ECMA 标准 二 br 二 索引 过/p 二 


</div> 


</div> 
</div> 


任务 6 “叮当 网 上 书店 ”首页 总 体 结构 


6.4.3 登录 页 XHTML 总 体 结构 


登录 页 效果 如 图 6-26 所 示 。 


| 动 竹 户 | 林 四 户 = 且 | 登录 


ZE 


村 认 计 。 He 开 宝 ”攻打 管 府 。 von 条 习 Err Py 
DEL 加 [EEE 人 
叮当 网 ， 全 球 领先 的 中 文 网 上 书店 


dea 户 登 录 

本 万 种 图 书 音像 ， 并 有 家 居 百 货 、 化 妆 品 、 娄 码 等 几 十 个 类 别 | 共 计 百 万 种 商品 ，2000 个 用 户 登 录 

入 驻 精 品 店 中 店 et 

je 到 一- 上 中 下 结构 
电视 购物 的 3~ 折 ， 传 统 书店 的 5~7 折 ,其 他 网 站 的 m3 折 登录 

更 方便 、 要 安全 


全 国 想 过 soo 个 城市 送 货 上 门 、 货 到 付款 。 牛 标 一 点 ， 堆 风险 购物 ， 便 邱 到 机- 


人 


Cr © TF ntraoog Ni Rats moret Formered Br Grrttete ca 全 Wrote 


图 6-26 登录 页 效果 


从 图 6-26 可 以 看 出 ,登录 页 中 间 部 分 可 以 分 为 左 、 右 两 块 。 左边 可 以 通过 ul\li 或 者 
Pp、hn 实现 ; 右边 考虑 到 整个 外 边 有 一 个 圆 角 边框 ,所 以 要 将 右边 分 成 上 中 下 结构 ,这 样 
才能 实现 圆 角 效果 。XHTML 代码 如 下 : 


<div class= "yposition"> 
<img src 一 "images/login-leftl. gif" hspace="10" vspace="10"> 
</div> 
去 | 一 登录 -- 之 
<div class="h"> 
<div class= "login-left"> 
<u> 
<<li class 二 "b" 志 更 多 选择 过 /li 
过 li>60 万 种 图 书 音像 ,并 有 家 居 百 货 、 化 妆 品 、 数 码 等 几 十 个 类 别 共计 百 万 种 商品 ， 
2000 个 人 驻 精品 店 中 店 过 /li 
过 li class 二 "b" 志 更 低 价格 二 /li> 
去 li 全 电视 购物 的 3 一 5 折 , 传 统 书店 的 5~7 折 , 其 他 网 站 的 7 一 9 折 达 /li 
<li class 二 "b" 过 更 方便 、 更 安全 <</li> 
三 li 这 全 国 超过 300 个 城市 送 货 上 门 、 货 到 付款 。 鼠 标 一 点 , 零 风 险 购物 , 便捷 到 家 。 


<</1i> 
</u> 
</div> 
=div class= "login-right"> 
<div class= "login-top"><=/div> 2 
div class= "login-mid"> = 中 => 


Ts 
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一 div class 二 "notice" 放 用 户 登录 </div> 
二 div class 二 "main" 这 E-mail 地 址 或 昵称 : 
二 input name= "username" type= "text" class="inpl"> 
<br> 
二 span style 二 "padding-left:66px;" 二 密码 : 过 /span 二 
input name= "paw" type="password" class="inpl"> 
=<div class= "login-dl"> 
二 input name 一 "dl" type 二 "submit" value 一 " 登 录 " class 一 "login-submit" 过 
</div> 
</div> 
二 div class 二 "login-end" 二 您 还 不 是 叮当 网 用 户 ?<</div 二 <!--F--> 
<div align= "right"> 
过 a href 一 "register. html" 之 创建 一 个 新 用 户 之 之 一 /A 之 &nbsp;i&nbsp; 
</div> 
</div> 


<div class= "login-bottom"></div> 
</div> 
</div> 


65 任务 小 结 


通过 本 任务 的 学 习 和 实现 ,Bill 已 经 基本 了 解 和 掌握 了 如 何 用 XHTML 的 不 同 标签 
来 实现 网 页 效果 的 布局 。 可 能 刚 开 始 你 看 到 一 个 页 面 对 该 使 用 哪个 标签 还 有 些 犹 了 豫 ,但 
经 过 后 期 的 大 量 的 练习 你 表 定 能 达到 熟 能 生 巧 的 程度 。 加 油 吧 ! 


LD 


66 能 力 评 估 


.比较 div 标签 与 span 标签 的 不 同 。 

. 简 述 a 标签 的 几 种 链接 效果 。 

. 简 述 input 标签 的 几 种 属性 。 

img 标签 .a 标签 .form 标签 分 别 有 什 么 属性 是 必需 的 ? 


任务 7 ' 杀 当 网 上 书店 "购物 车 页 整体 结构 


在 任务 6 中 ,Bill 完成 了 “叮当 网 上 书店 ”首页 整体 结构 设计 ,掌握 了 一 些 常 用 标签 的 
应 用 ,并 完成 了 “图 书 分 类 页 图书 详细 页 图书 登录 页 3 个 页 面 的 制作 。 按 照 任务 6 的 知 
识 和 技巧 来 制作 “叮当 网 上 书店 ”购物 车 页 面 时 会 发 现 有 一 些 困 难 和 烦恼 : 这 么 多 的 数据 
字段 要 进行 排列 显示 ,用 DIV 或 者 Span 来 布局 时 有 些 烦琐 。 那么 有 没有 一 种 针对 这 种 
大 数据 量 展示 的 布局 标签 呢 ? 本 任务 中 ,Bill 将 使 用 table 标签 来 进行 模块 布局 。 

人 学习 目 标 

(1) 理解 掌握 表格 标签 的 使 用 。 

(2) 掌握 细 线 表格 的 制作 方法 。 


71 任务 描述 


如 图 7-1 所 示 ,购物 车 页 主要 由 头 部 、 主 体 和 底部 3 部 分 组 成 。 头 部 和 底部 与 首页 相 
同 ,本 任务 主要 通过 表格 标签 (table、th、tr、td) 完 成 中 间 主 体 部 分 的 制作 。 


2 王 8E- mn 页 甸 


图 7-1 购物 车 页 效果 图 
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72 相关 知识 


table 在 Web 2. 0 以 前 是 很 多 网 页 设计 师 的 首选 布局 标签 ,由 于 用 表格 布局 存在 页 
面 结构 比较 复杂 、 页 面 模块 比较 呆板 .灵活 性 和 复 用 性 不 够 等 缺点 。 因 此 ,在 Web 2.0 以 
后 ,大 部 分 网 页 设计 师 开 始 采用 DIV 进行 布局 ,因为 DIV 布局 可 以 弥补 表格 布局 的 缺 
点 ,使 网 页 设计 更 加 灵活 , 且 可 以 复 用 ,因此 便于 网 站 的 开发 和 维护 。 

但 是 ,不 是 说 采用 了 DIV 布局 后 就 把 表格 布局 就 完全 据 弃 。 两 者 各 有 所 长 ,比如 本 
任务 中 的 购物 车 页 面 就 是 一 个 用 表格 布局 比 用 DIV 布局 更 加 简单 .轻松 的 经 典 案例 。 因 
为 本 页 面 的 设计 是 一 个 大 数据 量 的 展示 页 面 , 如 果 采 用 DIV 布局 ,会 让 设计 者 感觉 到 非 
常 麻烦 ,后 续 的 CSS 设计 也 非常 烦琐 。 因 此 ,针对 这 样 大 数据 量 展示 的 页 面 设 计 ,一般 采 
用 DIV 和 表格 结合 进行 布局 ,两 者 相辅相成 。 另 外 ,一 般 网 页 设计 中 ,针对 UI 的 设计 ,也 
多 采用 table 标签 来 进行 模块 的 局 部 布局 。 读 者 在 以 后 的 学 习 和 工作 中 要 多 加 练习 , 深 
刻 理解 。 


7.2.1 table tr.th 和 td 标签 


1. 表格 示意 图 
如 图 7-2 所 示 ,table 表示 表格 ,tr 表示 行 ,th 或 td 表示 单元 格 。 


标题 行 单元 格 用 th 表示 表格 用 table 表 示 
-月 -月 月 
1200 1000 1500 | 了 用 tr 表示 
十 一 单元 格 用 td 表示 


7-2 表格 示意 图 


2. table 标签 的 基本 结构 
table 标签 的 基本 结构 如 下 : 


<<table> 二 !-- 定 义 表格 -- 
<<tr> 二!-- 定 义 标题 行 -- 二 
三 t 耻 二 … 达 /th 二 !-- 标 题 行 一 般 用 th 代 苦 td, 显 示 效果 为 自动 加 粗 . 居 中 -- 二 
mh 
<tr> 
过 td 二 … 达 /td>> 二!-- 定 义 单元 格 -- 二 
</t> 
</table> 
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任务 7 和 | 


(1) table 标签 : 定义 一 个 表格 。 每 一 个 表格 只 有 一 对 所 table>.… 王 /table> ,一 个 
页 面 中 可 以 有 多 个 表格 。 

(2) tr 标签 : 定义 表格 的 行 。 一 个 表格 可 以 有 多 行 ,所 以 tr 对 于 一 个 表格 来 说 不 是 
唯一 的 。 

(3) th,\td 标签 : 定义 表格 的 一 个 单元 格 。 每 行 可 以 有 不 同 数量 的 单元 格 , 在 二 td 二 
和 去 /td> 之 间 是 单元 格 的 具体 内 容 。 一 般 标题 行 用 th 代替 td, 显 示 效 果 为 自动 加 粗 、 
居中 。 

注意 : 上 述 的 元 素 必 须 而 且 只 能 够 配对 使 用 。 缺 少 任何 一 个 元 素 , 都 无 法 定义 出 一 
个 表格 。 


3. 表格 的 属性 


在 XHTML 中 常用 的 表格 的 属性 如 表 7-1 所 示 。 
表 7-1 XHTML 中 常用 的 表格 的 属性 


属 性 描 述 

width 指定 表格 或 某 一 个 表格 单元 格 的 宽度 。 单 位 可 以 是 百分比 或 者 像素 
height 指定 表格 或 某 一 个 表格 单元 格 的 高 度 ,单位 可 以 是 百分比 或 者 像素 
border 表格 边线 粗细 ,border=0 表示 没有 边框 


cellspacing 单元 格 间距 
cellpadding 单元 格 边 距 


colspan 表示 当前 单元 格 跨越 几 列 
rowspan 表示 当前 单元 格 跨越 几 行 
align 指定 表格 或 某 一 个 单元 格 中 的 内 容 ( 文 本 、 图 片 等 ) 的 水 平 对 齐 方式 
指定 某 一 个 单元 格 中 的 内 容 ( 文 本 、 图 片 等) 的 垂直 对 齐 方式 。 垂直 对 齐 方 式 
valign 的 属性 值 包括 : top 一 一 顶端 对 齐 ; middle 居中 对 齐 ; bottom 一 一 底 端 对 
齐 ; baseline 相对 于 基线 对 齐 


7.2.2 thead .tbody 和 tfoot 标签 


通常 可 以 将 表格 分 成 3 个 部 分 : 表 头 .主体 和 脚注 ,分 别 用 thead、tbody、tfoot 来 标 
注 。thead 指明 表格 的 表 头 部 分 ,用 来 放 标题 之 类 的 内 容 ; tbody 指明 表格 的 主体 部 分 ， 
用 来 放 数据 体 ; tfoot 指明 表格 的 脚注 部 分 。 在 浏览 器 解析 页 面 代码 时 ,表格 是 作为 一 个 
整体 解析 的 ,使 用 tbody 可 以 将 表格 分 段 解析 显示 ,而 不 用 等 整个 表格 都 下 载 完 成 后 青 
显示 。 

示例 代码 结构 如 下 : 

<table> 

=thead> 


<tr> 
过 td 二 表 头 </td 二 


lt 
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</tr> 
</thead> 
=tbody> 
= 
二 td> 表 体 </td>> 
</t> 
</tbody> 
=tfoot> 
< 
三 td 二 表 脚 二 /td 二 
/i 
< 到 /toot> 
=/table> 


73 任务 实现 


7.3.1 购物 车 主体 部 分 整体 结构 


购物 车 主体 部 分 效果 如 图 7-3 所 示 。 整 个 购物 车 主体 部 分 可 将 其 分 为 4 块 ,分 别 为 
标题 shoppingtitle、 表 头 shoppingtabletop、 中 间 表 格 区 shoppingtablecenter 和 底部 
shoppingtablefooter。 代 码 如 下 : 


<divid="main"> 
<div class="shoppingtitle"> .</div> 
<div class="shoppingtabletop"> .… </div> 
<div class= "shoppingtablecenter"> .</div> 
<div class= "shoppingtablefooter"></div> 
</div> 


7.3.2 标题 shoppingtitle 结构 


标题 shoppingtitle 的 效果 如 图 7-4 所 示 。 
shoppingtitle 部 分 由 “我 的 购物 车 ”和 “您 选 好 的 商品 : “两 段 文字 构成 ,采用 span 标 
签 实现 。 代 码 如 下 : 
<div class= "shoppingtitle"> 
二 span class 二 "myshoppingcar" 记 我 的 购物 车 二 /span 二 


二 span class 一 "myproducts" 之 您 选 好 的 商品 : 二 /span> 
</div> 
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任务 7 dd | 


| 我 的 购物 车 今 迁 好 的 商品 : = shoppingtitle 
商品 号 而 品名 前 档 数 旺 振作 二 | shoppingtabletop 
FR, A a ERT 
] ET ee oe olf 1 a | i 
口 万 代 拓 麻 歌 子 水 昌之 让 【 迁 明 并) 0-30- 本 析 本 | 攻 站 
日 全 ed bd | 一 上 shoppingtablecenter 
口 互 此 抵 麻 驶 季 水 曲 之 村 【 谈 星 打 )》 Fe 5 折 1 | 
日 aaalad 五 有 和 eete 1 00 of 1 wn | 经 
口 契 代 打 麻 歌 子 本 最 之 这 〔 旋 听 打 ) 0 曲折 1 地 际 | 全 下 
[=| [2 Se tf 1 | 信 改 
口 契 代 所 麻 歌 子 本 蝇 之 况 “湖上 星 抽 ) 90 oi 1 Wr | 从 2 
日 43 Fa ol 1 mek | gm 
口 万 人 本 用 台子 水 曲 之 应 (得 咀 打 ) 3 or 1 | 六 站 
日 他 四 击 王 且 Yat otf 1 | 此 改 
w= 
= shoppingtahlefooter 
图 7-3 购物 车 主体 部 分 效果 图 
以 我 的 购物 车 ”您 选 好 的 商品 : 
图 7-4 标题 shoppingtitle 的 效果 
7.3.3 ” 表 头 shoppingtabletop 结构 
表 头 shoppingtabletop 的 效果 如 图 7-5 所 示 。 
| 两 品 号 两 品名 价格 数量 操作 


7-5 表 头 shoppingtabletop 的 效果 


表 头 shoppingtabletop 部 分 由 1 行 5 列 的 表格 构成 ,采用 table,thead tr、th 标签 
XHTML 代码 如 下 : 


=<div class= "shoppingtabletop"> 
<table> 
=thead> 
< 
过 th class 二 "firsttd" 志 商品 号 二 /th 
过 th class 一 "secondtd" 二 商品 名 二 /th> 
过 th class 二 "threetd" 二 价格 过 /th 二 
过 th class 二 "fourtd" 志 数量 二 /th 
过 th class 王 "fivetd" 之 操作 到 /th> 
/> 
<=/thead> 
</table> 
</div> 
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7.3.4 中 间 表 格 区 shoppingtablecenter 结构 


细 线 表格 区 shoppingtablecenter 的 结构 如 图 7-6 所 示 。 


口 20019134 五 月 信 寄 和 入 6-58 313.00 719 1 于 | 从 辽 
口 万代 括 麻 歌 季 水 最 之 恋 (通明 红 ) 00- 95.00 61 折 1 于 | 从 履 
口 3 43 at 20.40 16 折 1 到 于 | 信 履 
口 万 他所 磋 系 于 水 最 之 恋 “天明 红 ) 487ge- 93.00 67 折 1 | 住 由 
口 20019134 五 月 人 家 客 河 3H6758 79 折 1 型 了 | 从政 
口 之 恋 (通明 红 ) Sa8-86- 03.00 67 折 1 证 | 从 下 
S| [23 et T6 折 1 ME | 信 玫 
口 万 代 所 麻 歌 子 水 最 之 让 【通明 红 】 38786- 93.00 07 折 1 于 | 住 几 
口 市 开 草 et 20.40 75 折 1 至 | 信 孜 
口 万 代 声 县 生 子 水 最 之 让 (通明 并 】 68- 93.00 67 折 1 | 人 
口 二 本 前 王 各 et 20.40 16 折 1 | 位 站 
ET 


图 7-6 中间 表格 区 shoppingtablecenter 的 结构 


整个 中 间 部 分 有 左 、 右 两 条 蓝 色 细 线 ,采用 CSS 设置 图 片 背景 实现 。 内 部 是 一 个 
11 行 5 列 的 细 线 表格 ,表格 内 部 由 表单 , 超 链接 文字 等 构成 。 
XHTML 代码 如 下 : 


所 div class= "shoppingtablecenter"> 
< 一 table border= "0" cellspacing = "0" cellpadding = "0" class 一 "mycartable" 
去 上 -在 table 中 将 表格 边框 及 单元 格 边 距 及 间距 都 设置 为 0 -- 二 
<tbody> 
<tr> 
过 td colspan 二 5” class 二 "firsttrtd" 二 商品 金额 总 计 : 
过 span class 一 "more" 过 至 126.40 一 /span> 您 共 节 省 : 圣 48.60 
<input name= "tj" type= "submit" value="" class= "balancebtn"> 
</td> 二 !-- 采 用 colspan 合并 列 单元 格 -二 
去 /> 
<tr> 
td class= "firsttd"> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
td class= "secondtd"> 
过 a href 一 "product.html" 之 20019134 五 月 俏 家 物语 三 /a 二 
</td> 
td class="threetd"> 
<font class= "line-middle"> ¥16.50</font> 
< 到 font class="more"> 畦 13.00 二 /font>> 79 折 


120 


任务 7 dd | 


</td> 
< 到 td class= "fourtd"> 
=input name 一 "shop1" type= "text" class 一 "inputl" value="1"> 
</td> 
td class= "fivetd"> 
二 a href 王 "product.html" 过 删除 一 /a> | 
二 a href 王 "product.html" 过 修改 一 /a> 
</td> 
</tr> 
过 tr class 二 "oushutrtd"> 二!-- 将 行 设置 class 类 实现 隔行 背景 效果 -- 二 
<td> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
td class= "alignleft"> 
过 a href 王 "product.html" 之 万 代 拓 麻 歌 子 水 晶 之 恋 ( 透 明 红 )</a> 
</td> 
<td> 
<font class= "line-middle"> ¥138.00 </font> 
<font class= "more"> 半 93.00<</font> 67 折 
</td> 
<td> 
=input name= "shop2" type= "text" class= "inputl" value="1"> 
</td> 
<td> 
二 a href 王 "product.html" 过 删除 一 /a> | 
二 a href 王 "product.html" 过 修改 一 /a> 
</td> 
</tr> 
<tr> 
<td> 
<input type 一 "checkbox 
</td> 
<td> 
过 a href 二 "product. html" 二 魅惑 帝王 爱 二 /a 二 
</td> 
<td> 
<font class= "line-middle">¥24< /font> 
<font class="more"> 半 20.40<</font>> 75 折 
</td> 
<td> 
<input name= "shop3" type= "text" class= "inputl" value="1"> 
</td> 
<td> 
过 a href 王 "product.html" 过 删除 一 /a> | 
二 a href 王 "product.html" 之 修改 一 /a> 
</td> 
</t> 
tr class="oushutrtd"> 


name= "choice" value=""/> 
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<td> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
<td> 
过 a href 二 "product.html" 记 万 代 拓 麻 歌 子 水 晶 之 恋 ( 透 明 红 ) 二 /a 二 
</td> 
<td> 
<font class= "line-middle"> ¥138.00 </font> 
<font class= "more"> 半 93.00</font>> 67 折 
</td> 
<td> 
=input name= "shop2" type= "text" class= "inputl" value="1"> 
</td> 
<td> 
过 a href 王 "product.html" 过 删除 一 /a> | 
过 a href 王 "product.html" 过 修改 一 /a> 
</td> 
</tu> 
<tr> 
<td> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
<td> 
二 a href 王 "product.html" 之 20019134 五 月 俏 家 物语 二 /a 二 
</td> 
<td> 
<font class= "line-middle"> ¥16.50</font> 
<font class 王 "more" 二 半 13.00 一 /font> 79 折 
</td> 
<td> 
<input name= "shopl" type= "text" class= "inputl" value="1"> 
</td> 
<td> 
过 a href 王 "product.html" 过 删除 一 /a> | 
二 a href 王 "product.html" 过 修改 一 /a> 
</td> 
</tr> 
tr class= "oushutrtd"> 
<td> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
<td> 
过 a href 二 "product.html" 记 万 代 拓 麻 歌 子 水晶 之 恋 (透明 红 ) 二 /a 二 
</td> 
<td> 
<font class= "line-middle"> ¥138.00 </font> 
<font class 一 "more" 之 闺 93.00<</font> 67 折 
</td> 
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任务 7 | 


input name 一 "shop3" type= "text" class= "inputl" value= "1"> 
</td> 
<td> 
二 a href 王 "product.html" 之 删除 一 /a> | 
二 a href 王 "product.html" 过 修改 一 /a> 
</td> 
</u> 
</tbody> 
<tfoot> 
<tr> 
< 一 td colspan="5"> 
<div class 一 "pages" 之 
过 a href 一 " 井 ”class 一 "num" 之 第 一 页 一 /a> 
<span class="num_now">1</span> 
<a href="#" class="num">2</a> 
<a href="#" class="num">3</a>... 
<a href="#" class="num">49</a> 
<a href="#" class="num">50</a> 
过 a href=="#" class 一 "num" 过 最 后 一 页 一 /a> 跳 转 到 &nbsp; 
<input type 一 "text”class 一 "tiaozhuan" value="1" /> 
&nbsp; 页 &nbsp; 一 a href 王 "# "class 一 "golink" 盖 Go 一 /a> 
</div> 
</td> 
</tr> 
</tfoot> 
</table> 
</div> 


7.3.5 底部 shoppingtablefooter 结构 


如 图 7-3 所 示 , 底 部 shoppingtablefooter 为 圆 角 背景 图 片 ,这 里 只 须 写 出 块 结构 即 
可 ,在 CSS 中 通过 设置 背景 图 片 效 果实 现 。 
XHTML 代码 如 下 : 


<div class= "shoppingtablefooter"></div> 


74 任务 拓展 


7.4.1 注册 页 XHTML 总 体 结构 


注册 页 的 效果 如 图 7-7 所 示 。 
从 图 7-7 可 以 看 出 ,注册 页 与 购物 车 页 的 不 同 处 在 中 间 部 分 。 按 照 表格 布局 的 原则 ， 
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TE a es he Me pt pe ee po 
叮当 网 ， 全 球 领 先 的 中 文 网 上 书店 


BRH9 为 入 页 
i s ;主页 的 不 同 
ET - ”| 处 ,采用 表格 


和 表单 实现 


图 7-7 注册 页 效果 图 


注册 页 也 采用 表格 来 进行 布局 。 整 个 中 间 部 分 采用 form、table、tr、td 标签 来 实现 。 
XHTL 代码 如 下 : 


<div class= "yposition"> <img src 一 "images/login-leftl. gif" hspace="10" vspace="10"> 
</div> 
二!-- 设 置 表格 -- 二 
<div id="middle"> 
<form id="registerform" action="#" method="post"> 
<table width="100%" border= "0" cellspacing= "0"cellpadding= "0" 
align= "center"> 


<t> 
<td style=" font-size:14px;color: # ff0000;font-weight: bold;" height="30"> 
以 下 均 为 必 填 项 <=/td 二 

</tr> 

< 


< 到 td 一 table width="100%" border="0" cellspacing="0" 
cellpadding= "0" id= "shop_table"> 
<tr> 
< 到 td> 王 font color 一 "#FF0000">* 过 /font 汪 请 填写 您 的 E-mail 地 址 : 一 /td> 
<td class= "registerinputtd"><input name= "email" id= "email" 
type= "text" class="inp"> 
<label class= "required" for="email"></label></td> 
过 td class 一 "c" 过 请 填写 有 效 的 E-mail 地 址 ,在 下 一 步 中 您 将 用 此 邮箱 接收 
验证 邮件 。 志 /td 
< 到 /tr> 
x 
< 一 td 一 font color 二 " 间 FF0000" 二 * 过 /font 二 设置 您 在 叮当 网 的 昵称 : 二 /td 二 
td class= "registerinputtd" > <input name= "username" id= "username" 
type= "text" class="inp"> 
<label class= "required" for="username"></label></td> 
过 td class 二 "ce" 二 您 的 昵称 可 以 由 小 写 英 文字 母 数字 组 成 ,长 度 4 一 20 个 字 
符 。 /td 
</t> 
< 
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过 td<font color 一 " 井 FF0000" 盖 *< 到 /font> 设 置 密码 : </td 二 
td class= "registerinputtd"> 
=input name= "pwd" id="pwd" type= "password" class="inp"> 
<label class= "required" for="pwd"></label></td> 
去 td class 二 "ec" 二 您 的 密码 可 以 由 大 小 写 英文 字母 数字 组 成 ,长 度 6 一 
20 位 。 志 /td> 
</t> 
et 
过 td 二 再 次 输入 您 设置 的 密码 : 过 /td 二 
td class= "registerinputtd"> 
=<input name= "repwd" id= "repwd" type= "password" class="inp"> 
<label class= "required" for="repwd"></label></td> 
<td class="c"> &nbsp;</td> 
</t> 
et 
td colspan="3" height="40" align= "center"> <input name= "Bl1" type 
三 "submit" value 一 " 注 册 "”class 一 "submit" 之 一 /td 
CE 
</table></td> 
</tr> 
</table> 
</form> 
</div> 
</div> 


7.4.2 登录 页 XHTML 总 体 结构 


从 图 7-8 可 以 看 出 ,登录 页 分 为 左 、 右 两 部 分 。 左 边 采用 ul/li 结构 设计 ; 右边 外 框 线 
分 为 login-top、login-mid login-end 三 部 分 , login-mid 块 中 的 内 容 可 采用 表格 也 可 采用 
DIV 设置 。 


叮当 网 HE 向 Ws | | ee | jlmes 昌 | 3 
3 II PPT 
El 加 [ES 563 :a A sl 
厂 休 当 网 一 全 球 领 先 的 中 文 网 士 节 店 

Si 用 户 登录 一 十 与 主页 不 同 处 
的 万 种 图 书 音像 ， 并 有 京 居 百 余 、 化 悦 品 、 数 消 等 几 十 个 类 别 共 计 百 万 种 商品 , 2000 个 > 
入 驻 精 号 店 中 店 Email 她 村 或 再 称 : 
更 多 价格 EB: 
电视 网 秽 的 5-s 折 ， 传 统 书店 的 s-7 折 ， 其 他 网 站 的 7-4 折 登录 
更 方便 、 更 安全 
全 国 招 过 300 个 城市 送 终 上 门 、 货 到 付款 。 淮 标 一 点 ， 雪 风 有 购物 ， 便 捷 到 京 - 

舍 还 不 是 叮当 同 用 户 Y 

tt 


“ne 区 rmaums 


7-8 登录 页 效果 
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XHTL 代码 如 下 : 


div class= "yposition"> <img src= "images/login-left] .gif" hspace="10" vspace="10"> 
</div> 
二!-- 登 录 B- 二 
<div class="h"> 
<div class= "login-left"> 
<u> 
一 li class 一 "b" 盖 更 多 选择 一 /1 一 
<<li>60 万 种 图 书 音像 ,并 有 家 居 百 货 、 化 妆 品 .数码 等 几 十 个 类 别 共 计 百 万 种 商品 ， 
2000 个 人 驻 精品 店 中 店 二 /1 一 
过 li class 二 "b" 志 更 低 价格 二 /1i> 
<<1i 电 视 购物 的 3 一 5 折 , 传 统 书店 的 5 一 7 折 , 其 他 网 站 的 7 一 9 折 </li> 
<li class 二 "b" 过 更 方便 、 更 安全 </li>> 
二 li 全 全 国 超过 300 个 城市 送 货 上 门 、 货 到 付款 。 鼠 标 一 点 , 零 风险 购物 ,便捷 到 家 。 去 /1 一 
</ul> 
</div> 
<div class= "login-right"> 
<div class= "login-top"></div> 
<div class= "login-mid"> 
过 div class 一 "notice" 之 用 户 登 录 一 /div 之 
< 一 div class="main" 之 E-mail 地 址 或 昵称 : 
< 一 input name= "username" type= "text" class="inpl"> 
<br> 
二 span style 二 "padding-left:66px;" 志 密码: 过 /span 
<input name= "paw" type="password" class= "inpl"> 
<div class= "login-dl"> 
input name 一 "dl" type 二 "submit" value 二 " 登 录 " class 二 "login-submit"> 
</div> 
</div> 
二 div class 一 "loginrend" 过 您 还 不 是 叮当 网 用 户 ? 一 /div 之 
<div align= "right"><A href="register. html" 之 
创建 一 个 新 用 户 二 二 二 / A> &nbsp; &nbsp; 
</div> 
</div> 
<div class= "login-bottom"></div> 
</div> 
</div> 


75 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 已 经 掌握 了 网 页 中 表格 的 制作 方法 。 在 网 页 制作 中 ， 
经 常会 用 表格 来 展示 一 些 数据 和 UI 设计 效果 ,希望 大 家 认真 理解 表格 中 每 个 标签 的 作 
用 ,达到 以 点 概 面 的 效果 。 
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76 能 力 评 估 


1. 简 述 table ,th tr、\td 标签 的 作用 。 
2. 简 述 thead .tbody ,tfoot 标签 的 作用 。 
3. 单元 格 跨行 和 器 列 的 属性 和 值 分 别 如 何 表 示 ? 放 在 代码 的 什么 位 置 ? 
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任务 8 ' 杀 当 网 上 书店 "页面 布局 与 定位 


到 现在 为 止 ,Bill 已 经 按照 设计 稿 ,使 用 XHTML 语言 对 “叮当 网 上 书店 ”中 所 有 页 
面 的 结构 框架 进行 了 设计 。 我 们 从 一 开始 就 强调 Web 标准 充分 体现 了 结构 与 表现 相 分 
离 ,网 页 中 的 表现 就 是 指 网 页 中 的 样式 。 因 此 从 任务 7 开始 ,Bill 就 要 按照 设计 稿 使 用 
CSS 样式 表 对 所 有 页 面 的 样式 进行 控制 ,实现 最 终 效 果 。 本 任务 主要 针对 网 页 的 整体 结 
构 进行 布局 和 定位 。 

> 到 学 习 目 标 

(1) 熟练 掌握 CSS 样式 表 应 用 到 XHTML 页 面 的 方法 。 

(2) 熟练 掌握 CSS 选择 器 的 使 用 。 

(3) 熟练 掌握 CSS 声明 方式 。 

(4) 理解 盒子 模型 的 概念 和 应 用 。 

(5) 理解 文档 流 的 概念 。 

(6) 理解 浮动 定位 和 清除 的 使 用 。 

(7) 理解 相对 定位 和 绝对 定位 的 概念 。 


81 任务 描述 


任务 6 实施 完成 后 ,首页 的 结构 如 图 8-1 所 示 ( 由 于 篇 幅 有 限 只 截取 其 中 一 部 分 ) 。 

根据 设计 稿 的 要 求 ,首页 有 985 像素 的 宽度 ,页面 居中 显示 。 头 部 navlink 区 中 的 图 
片 .链接 按钮 ,链接 文字 3 部 分 需要 横向 排列 。 首 页 中 部 的 左 、 中 、 右 3 部 分 也 需要 横向 排 
列 。 下 面 要 使 用 外 部 CSS 样式 表 进行 布局 ,突破 文档 流 的 限制 。 通 过 本 任务 的 实施 , 首 
页 的 最 终 效 果 如 图 8-2 所 示 。 


82 相关 知识 


本 任务 讲解 CSS 样式 的 结构 .CSS 样式 应 用 到 XHMTL 页 面 中 的 方法 、 模 块 定位 与 
布局 。 
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图 书 分 类 ， 程 序 设计 Web 开 发 数据 库 管理 ILinux 入 门 管 理 热 门 搜索 ，CzlASP NETISQL ServedpHP 其 他 分 类 ，CzlASP NETSQL Server| 
叮当 图 书 请 | 请 入 入 要 查询 的 关键 词 “搜索 


用 户 登录 
E-mail 地址 或 者 昵称 ， 


密码 ， 


LE 

您 还 不 是 叮当 网 用 户 ? 
创建 新 用 户 >> 

点 击 排行 Top 10 


8-1 首页 原始 框架 效果 


‘2 区 * 于 | 借助 中 作 | 匠人 户 | 新 用 已 注 由 | 县 录 


加 书 分 类 ; 各 床 设计 Mab 开发 | 娄 各 这 理 |Linsz 入 站 管理 | 热门 雪 案 : CleP ET |s0L Server PHE | 下 外 分 和: CelAsP IE fal Sarvar 
后 当 而 书 国 清寺 入 于 喜光 关键 记 “得 委 六 并 下 ;二 二 


二 和 是 全 的 加 怀 ， 最 人 的 价格 尽 下 1 当 问 


8-2 首页 整体 布局 最 终 效果 图 


任务 8 “叮当 网 上 书店 ”页 面 布 局 与 定位 


8.2.1 CSS 样式 表 


CSS(Cascading Style Sheet, 层 释 样 式 表 ) 是 一 种 用 于 控制 网 页 样式 并 允许 将 样式 信 
息 与 网 页 内 容 分 离 的 置 标语 言 。 

CSS 的 作用 是 定义 网 页 的 外 观 ( 如 字体 .颜色 等 ) , 它 也 可 以 结合 JavaScript 等 浏览 器 
端 脚本 语言 做 出 许多 动态 的 效果 。 


1. CSS 语法 结构 


CSS 语法 由 3 部 分 构成 : 选择 器 (selector) ,属性 (property) 和 值 (value)。 选 择 器 指 
样式 编码 中 要 针对 的 对 象 ; 属性 是 CSS 样式 的 控制 核心 ,对 于 每 个 选择 器 ,CSS 都 提供 了 
丰富 的 样式 属性 ,如 浮动 方式 、 大 小 、 颜 色 等 ; 值 指 的 是 属性 的 值 , 有 两 种 形式 ,一 种 是 指 
定 范围 的 值 , 另 一 种 为 数值 。 结 构 如 下 : 


selector { 
propertyl : valuel; 
property2: value2; 


} 


常用 的 选择 器 有 三 种 类 型 。 
(1) 标记 选择 器 。 标 记 选 择 器 是 标记 选择 器 是 指 以 网 页 中 已 有 的 XHTML 标签 名 
作为 名 称 的 选择 器 ,该 样式 定义 后 本 文档 所 有 该 标签 都 会 自动 应 用 。 例 如 : 


hl { 
color: # {fff; 
font-size:25px; 


} 
(2) 类 选择 器 。 用 户 在 进行 结构 设计 时 ,可 根据 需要 为 多 个 XHTML 标签 使 用 class 
自 定义 名 称 , 例 如 : 


<div class="new"></div> 
<p class="new"></p> 
<h3 class="new"></h3> 


CSS 可 以 直接 根据 类 名 进行 样式 定义 ,方法 为 使 用 点 号 加 上 类 名 称 。 该 标记 定义 后 
需要 手动 应 用 。 例 如 : 


.new { 
background-color: # cee; 
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font-size:14px; 


} 


(3) id 选择 器 。id 选择 器 是 根据 DOM 文档 对 象 模型 原理 而 产生 的 一 类 选择 器 。 每 
个 标签 均 可 以 使 用 id 二 "" 的 形式 对 id 属性 进行 指定 。 例 如 : 


<div id= "container"></div> 


id 选择 器 使 用 # 加 上 id 名 称 的 形式 定义 。 该 样式 定义 后 本 文档 中 该 id 名 称 会 自动 
应 用 。 例 如 : 


#container { 
font-size: 14px; 
width:100% ; 

} 


提示 : 在 网 页 中 ,id 名 称 具 有 唯一 性 。id 选择 器 的 作用 就 是 对 每 个 页 面 中 唯一 出 现 
的 元 素 进行 定义 ,而 且 只 能 使 用 一 次 。 类 选择 器 的 好 处 是 ,无 论 是 什么 XHTML 标签 ,页 
面 中 所 有 使 用 了 同一 个 class 的 标签 均 可 使 用 此 样式 。 即 "定义 一 次 ,使 用 多 次 ”, 不 再 需 
要 对 每 个 标签 编写 样式 代码 。 

从 选择 器 的 优先 级 上 看 ,id 选择 器 的 优先 级 最 高 ,然后 是 类 别 选择 器 ,优先 级 最 低 的 
是 标签 选择 器 。 了 解 选 择 器 优先 级 能 够 帮助 用 户 优 化 CSS 样式 代码 。 


2. CSS 声明 


(1) 集体 声明 

除了 可 以 对 单个 对 象 指定 样式 外 ,也 可 以 对 一 组 对 象 进行 相同 样式 指派 。 这 样 做 的 
好 处 是 ,对 页 面 中 需要 使 用 相同 样式 的 地 方 ,只 须 书写 一 次 样式 ,从 而 减少 代码 量 , 改 善 代 
码 结 构 。 例 如 : 


#0one, .special { 
text-decoration: underline; 
} 
hl,h2,h3,h4,h5,p{ 
color: puple; 


} 


(2) 全 局 声明 

使 用 * * ”通配符 可 用 模糊 指定 的 方式 对 对 象 进行 选择 ,可 表示 所 有 对 象 ,包含 id 及 
class 的 XHTML 标签 。 使 用 方法 如 下 : 

人 


margin:0; 
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padding:0; 
} 


(3) CSS 样式 的 嵌 套 
当 只 对 某 个 对 象 的 子 对 象 进行 样式 设置 时 ,就 需要 使 用 样式 的 嵌 套 。 样 式 的 租 套 指 
选择 器 组 合 中 前 一 个 对 象 包含 后 一 个 对 象 ,对 象 之 间 使 用 空格 作为 分 隔 符 。 


Pp span { 
color:#cce; 
text-decoration: underline; 


} 
不 仅 可 以 实现 二 级 嵌 套 ,也 可 以 多 级 幅 套 。 例 如 : 


.mycar a img{ 
border: none; 


} 


8.2.2 应 用 CSS 到 网 页 中 


1. 行 间 样 式 表 
行 间 样 式 表 是 指 将 CSS 样式 编写 在 XHTML 标签 之 中 。 例 如 : 


过 hl style 二 "font-family:" 宋 体 "，Arial;color: #000;" 二 
Effective C# 中文 版 改善 C# 程序 的 50 种 方法 
</hl> 


行 间 样 式 表 由 XHTML 元 素 的 style 属性 所 支持 ,只 须要 将 CSS 代码 用 分 号 隔 开 书 
写 在 style 二 "" 之 中 即 可 。 

但 笔者 极力 反对 这 种 做 法 。 行 间 样 式 表 仅 仅 是 XHTML 标签 对 style 属性 的 支持 ， 
并 不 符合 表现 与 内 容 分 离 的 设计 原则 。 


2. 内 部 样式 表 
内 部 样式 表 与 行 间 样式 表 的 相似 之 处 在 于 ,它们 都 是 将 CSS 写 在 页 面 中 ; 不 同 的 是 ， 
内 部 样式 表 作为 页 面 一 个 单独 的 部 分 ,使 用 style 标签 定位 在 head 标签 中 。 例 如 : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 

html xmlns= "http://www. w3.org/1999/xhtml"> 

<head> 
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meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<<title> 叮 当 网 上 书店 到 /title> 
style type= "text/css"> 
body { 
font-family: "宋体",，Arial; 
font-size:12px; 
color: #000000; 
} 
# searcher { 
width:100% ; 
height:68px; 
margin:0 0 7px 0; 
} 
=/style> 
</head> 


3. 外 部 样式 表 


外 部 样式 表 是 CSS 应 用 中 最 好 的 一 种 形式 。 它 将 CSS 代码 单独 放 在 一 个 外 部 文件 
中 ,再 由 网 页 进行 调用 。 多 个 网 页 可 以 调用 同一 个 样式 表 文 件 ,这 样 能 够 实现 代码 最 大 限 
度 的 重用 及 网 站 文件 的 最 优化 配置 ,这 是 笔者 推荐 的 编码 方式 。 例 如 : 


<!IDOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional. dtd"> 
<html xmlns= "http://www. w3.org/1999/xhtml"> 
<head> 
meta http-equiv= "Content-Type" content= "text/html; charset=utf-8" /> 
<link rel= "stylesheet" type= "text/css" href 一 "css/top.css" /> 
<link rel="stylesheet" type= "text/css" href="css/indexmain.css" /> 
<link rel= "stylesheet" type= "text/css" href="css/foot.css" /> 
过 title 之 叮当 网 上 书店 过 /title>> 
</head> 


在 页 面 中 应 用 CSS 的 主要 目的 是 实现 良好 的 网 站 的 文件 及 样式 管理 ,这 种 分 离 式 的 
结构 有 助 于 用 户 合 理 划分 CSS 与 XHTML, 做 到 表现 与 结构 的 分 离 。 


4. 应 用 位 置 优先 级 


从 样式 写 和 的 位 置 来 看 ,其 优先 级 依次 如 下 。 
(1) 行内 样式 表 。 
(2) 内 部 样式 表 。 
(3) 外 部 样式 表 。 
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也 就 是 说 ,使 用 style 属性 定义 在 XHTML 标签 之 中 的 样式 ,优先 于 写 在 style 标签 
内 的 样式 定义 ,最 后 才 是 对 外 部 样式 表 的 应 用 。 


8.2.3 盒子 模型 


盒子 模型 (Box Model) 是 CSS 的 核心 ,现代 Web 布局 设计 简单 地 说 就 是 一 堆 盒 子 
的 排列 与 嵌 套 。 掌 握 了 盒子 模型 与 它们 的 摆 放 控制 ,会 发 现 再 复杂 的 页 面 也 不 过 
如 此 。 


1. 盒子 模型 的 概念 


在 设计 网 页 时 ,传统 的 表格 布局 网 页 已 经 被 使 用 DIV 和 CSS 共同 布局 网 页 \ 设 定 网 
页 样式 的 形式 所 代替 。 改 用 CSS 排版 后 ,由 CSS 定义 的 大 小 不 一 的 盒子 和 盒子 嵌 套 来 布 
局 网 页 。 盒 子 模型 是 指 把 DIV 布局 中 的 每 一 个 元 素 当 作 一 个 盒 状 物 ,无 论 布局 如 何 , 它 
们 都 是 几 个 盒子 相互 贴近 显示 ,浏览 器 通过 分 析 这 些 盒 状 物 的 大 小 和 浮动 方式 来 判断 下 
一 个 盒 状 物 是 贴近 显示 还 是 在 下 一 行 显示 ,还 是 其 他 显示 方式 。 从 前 面 对 * 叮 当 网 上 书 
店 ” 的 介绍 中 可 以 看 到 ,该 网 站 的 大 块 布局 就 是 由 #container、#banner 这 样 的 盒子 通过 
或 上 下 .或 左右 .或 包含 的 关系 构成 ,如 图 8-3 所 示 。 


2. 盒子 模型 的 细节 


为 了 让 我 们 的 布局 更 细致 ,更 具有 可 控 性 ,在 盒子 模 设 计 中 ,CSS 除了 内 容 宽 度 外 ， 
还 提供 了 内 边 距 (padding)、 外 边 距 Cmargin) ,边框 (border)3 个 属性 ,用 于 控制 盒子 对 象 
的 显示 细节 。 在 CSS 中 ,定义 盒子 四 周 样式 时 ,按照 顺 时 针 的 方式 , 即 上 、 布 \ 下 、 左 ,如 
图 8-4 所 示 。 

在 内 容 区 外 面 ,依次 围绕 着 padding 区 、border 区 和 margin 区 。 通 过 盒子 模型 ,可 以 
为 内 容 设置 边界 . 留 白 以 及 边 距 。 盒 子 模型 最 典型 的 应 用 是 这 样 的 : 我 们 有 一 些 内 容 , 可 
以 为 这 些 内 容 设置 一 个 边框 ,为 了 让 内 容 不 至 于 紧 挨 着 边框 ,可 以 设置 padding; 为 了 让 
这 个 盒子 不 至 于 和 别 的 盒子 靠 得 太 紧 , 可 以 设置 margin 。 

3. 内 边 距 padding 和 外 边 距 margin 的 使 用 格式 

(1) 为 4 个 方向 设置 同一 值 ,例如 : 

# main{ 

padding:10px; 


margin: 5px; 


} 


以 上 代码 表示 将 对 象 的 4 个 方向 的 内 边 距 都 设置 为 10px, 外 边 距 设 置 为 5px。 
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图 8-4 盒子 模型 细节 
(2) 设置 上 、 下 为 同一 个 值 , 左 、 右 也 为 一 个 值 ,例如 : 


# main{ 
padding:10px 5px; 
margin: 5px 2px; 


} 


以 上 代码 表示 将 该 对 象 的 上 、 下 方向 内 边 距 设置 为 10px, 左 、 右 内 边 距 设置 为 5px; 
上 、 下 外 边 距 设 置 为 5px, 左 \ 右 外 边 距 设置 为 2px。 两 个 值 之 间 用 空格 隔 开 。 
(3) 设置 左右 为 同一 个 值 ,上 、 下 为 不 同 的 值 , 例 如 : 


# main{ 
padding:5px 10px 15px; 
margin: 5px 2px lpx; 

} 


以 上 代码 表示 将 该 对 象 的 内 边 距 设置 为 上 5px、 右 10px、 下 15px, 左 因为 缺 省 与 右 相 
等 ,为 10px; 将 外 边 距 设置 为 上 5px、 右 2px、 下 1px, 左 因为 缺 省 与 右 相 等 ,为 2px。 

(4) 如 果 设 置 4 个 方向 的 值 都 不 同 ,就 分 别 写 出 4 个 值 , 中 间 用 空格 隔 开 。 

也 可 以 使 用 下 列 单独 的 属性 ,分 别 设置 padding 和 margin 的 上 \ 右 、 下 \ 左 边 距 。 

CD padding-top 。 

©@ padding-right 。 

G@) padding-bottom。 

@ padding-left。 

©® margin-top 。 

© margin-right。 

© margin-bottom 。 


@ margin-left。 


4. 边框 border 


每 个 边框 有 3 种 属性 : 宽度 ,样式 和 颜色 。 可 以 使 用 border 属性 一 次 性 定义 ,例如 : 
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.navlink { 
border: 1px solid #¢cc; 


} 


以 上 代码 表示 为 navlink 对 象 设置 四 周 的 边框 为 1px 宽 、 实 线 .颜色 为 #ccc。 

也 可 以 分 别 使 用 3 个 单独 的 属性 进行 设置 。 

(1) border-color。 

(2) border-style。 

(3) border-width 。 

如 果 和 希望 为 对 象 的 某 一 个 边 设置 边框 ,而 不 是 为 4 个 边 都 设置 边框 样式 ,可 以 使 用 下 
面 的 单 边 边框 属性 。 

(1) border-top 。 

(2) border-right 。 

(3) border-bottom 。 


(4) border-left 。 


同样 也 可 以 使 用 单 边 的 3 个 单独 属性 进行 设置 ,例如 : 


.top{ 
border-top-style: solid; 
border-right-width: 2px; 
boder-left-color: red; 


} 


注意 : 在 进行 不 同 浏览 器 测试 时 ,IE 6 和 其 他 主流 浏览 器 对 盒子 模型 有 不 同 的 解释 ， 
这 个 不 同 解释 表现 在 念 子 的 尺寸 上 。 图 8-5 所 示 是 两 种 类 型 的 浏览 器 对 盒子 尺寸 的 不 同 
解释 。 可 以 看 出 ,IE 6 盒子 模型 中 ,盒子 的 尺寸 包含 了 内 容 区 、padding、border 和 margin 
这 4 个 部 分 ; 而 W3C 的 盒子 模型 中 ,盒子 的 尺寸 只 包含 内 容 区 , 即 padding、border 和 
margin 被 排除 在 盒子 尺寸 之 外 。 


| 盒子 实际 宽度 一 一 合子 实际 宽度 一 
marpin-tol Jargin lg 
border-top bordertop 


padding-top padding-top 


content 
(width) 


content 
(width) 


Yalu 
oraurpped 


1qBau-aurpped 
oraurpped 


qu-aurpped 


padding-bottom padding-bottom 


border-bottom border-bottom 


margin-bottom 
主流 的 和 本 


margin-bottom 
EE ei 


8-5 不 同 浏览 器 对 盒子 模型 的 解释 


主流 浏览 器 实际 宽度 一 左边 界 十 左边 框 十 左 填充 十 内 容 宽 度 (width) 
十 右 填 充 十 右边 框 十 右边 界 
IE 6 实际 宽度 一 内 容 宽度 (width) 
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提示 : 在 计算 两 个 对 象 的 间距 时 ,有 一 个 特殊 情况 ,就 是 上 、 下 两 个 对 象 的 间距 问题 。 
当 上 、 下 两 个 对 象 都 有 margin 属性 时 ,总 是 以 较 大 值 为 准 , 这 是 CSS 设计 的 空白 边 登 加 
规则 。 但 是 一 旦 为 某 个 元 素 设置 了 float 属性 ,它们 将 不 再 进行 空白 边 登 加 。 同 时 , 设 为 
浮动 状态 时 ,在 IE6 浏 览 器 下 对 象 的 左右 margin 会 加 倍 ,可 以 通过 设置 对 象 的 display: 
inline 来 解决 。 


8.2.4 浮动 布局 


浮动 是 CSS 中 重要 的 规则 ,大 部 分 网 页 采用 浮动 来 达到 分 栏 效果 。 
1. 文档 流 


文档 流 是 浏览 器 解析 网 页 的 一 个 重要 概念 ,对 于 一 个 XHTML 网 页 ,body 元 素 中 的 
任意 元 素 , 根 据 其 前 后 顺序 ,组 成 了 一 个 个 上 下 关系 ,这 便 是 文档 流 。 文 档 流 根据 这 些 元 
素 的 顺序 去 显示 它们 在 网 页 之 中 的 位 置 。 文 档 流 是 浏览 器 默认 的 显示 原则 。 

每 个 非 浮动 块 级 元 素 都 独占 一 行 ,比如 XHTML 中 的 div.p, 这 些 块 级 元 素 本 身 占据 
一 行 的 显示 空间 ,而 且 其 后 的 元 素 也 需 另 起 一 行 显示 。 

内 联 元 素 不 占 一 行 ,多 个 内 联 元 素 可 在 同一 行 显示 ,比如 XHTML 中 的 a、span 标 
签 。 块 级 元 素 可 以 包含 内 联 元 素 和 其 他 块 级 元 素 。 


2. 浮动 定位 


浮动 定位 的 目的 是 打破 默认 的 文档 流 的 显示 规则 ,按照 用 户 需要 的 布局 进行 显示 。 
用 户 可 以 利用 float 属性 来 进行 浮动 定位 。float 属性 有 3 个 值 ,如 表 8-1 所 示 。 


表 8-1 float 属性 
属性 描 述 可 用 值 
none 
float 用 于 设置 对 象 是 否 浮动 显示 ,并 设置 具体 的 浮动 方式 left 


right 


float 值 为 none 时 表示 对 象 不 浮动 。 比 如 当 对 象 向 左 浮动 后 ,对 象 的 右 侧 将 空 出 区 
域 ,以 便 剩 下 的 文档 流 能 够 贴 在 右 侧 , 如 图 8-6 所 示 。 简 单 地 说 , 当 需 要 网 站 有 较 强 的 分 
辩 率 及 内 容 大 小 适应 能 力 时 ,就 需要 采用 浮动 定位 。 浮 动 定 位 主要 是 针对 非 固定 类 型 网 
页 进行 设计 的 。 以 下 3 种 情况 就 需要 考虑 使 用 浮动 定位 。 

(1) 居中 布局 。 

(2) 横向 宽度 根据 百分比 缩放 。 

(3) 需要 借助 margin、. padding border 等 属性 。 

提示 : 在 3 个 元 素 同 时 向 左 或 者 向 右 浮动 时 ,能 否 产生 横向 连 排 的 效果 取决 于 窗口 
的 大 小 以 及 元 素 的 占 位 。 如 图 8-7 所 示 , 如 果 外 层 盒 子 变 小 或 者 本 身 元 素 变 大 ,由 于 空间 
不 够 , 右 侧 的 元 素 可 能 移 至 下 一 行 显示 。 还 有 一 种 情况 ,由 于 左 侧 元 素 过 高 ,导致 右 侧 元 
素 无 法 移动 到 第 二 排 最 左 侧 。 
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图 8-6 浮动 定位 


8-7 无 法 浮动 情况 


3. 浮动 的 清理 


清理 是 浮动 中 的 另 一 个 有 用 的 工具 。 例 如 , 当 a、b 两 个 框 向 左 浮动 时 ,导致 了 a、b、c 
3 块 浮动 式 排列 ,如 图 8-8 所 示 。 如 果 不 希 望 c 继续 浮动 , 便 可 以 使 用 clear 属性 拒绝 对 象 
向 某 个 方向 浮动 ,效果 如 图 8-9 所 示 。 


El 


图 8-8 3 块 浮动 8-9 浮动 清理 
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清理 浮动 的 方法 有 两 种 。 以 图 8-9 为 例 , 第 一 种 方法 是 为 c 框 设置 clear:left 属性 ， 
以 拒绝 对 象 向 左 侧 浮 动 , 这 样 它 就 不 再 继续 浮动 ,而 转移 到 第 二 行 显 示 。 

另 一 种 用 法 是 , 当 需 要 另 起 一 行 时 ,可 以 制作 一 个 空 div 标签 ,使 用 clear:both 属性 
将 它 的 左右 浮动 都 拒绝 。 这 个 空 div 之 后 的 任意 元 素 都 不 会 受到 上 面 对 象 浮动 所 产生 
的 影响 ,起 到 清理 浮动 的 作用 。 因 此 ,会 在 行业 网 站 制作 时 , 若 对 模块 采用 浮动 布局 ,由 于 
浮动 后 ,当前 的 模块 会 脱离 文档 流 , 后 续 的 模块 会 延续 文档 流 进行 显示 ,导致 页 面 结 构 产 
生 显示 差异 。 为 确保 模块 浮动 后 ,保证 后 续 的 模块 能 够 按照 原先 文档 流 的 显示 顺序 ,一般 
都 采用 在 浮动 模块 的 父 盒子 结束 前 ,加 入 一 个 二 div class 王 "clear" 二 二 /div 二 来 解决 这 个 
问题 。class 一 "clear" 的 CSS 样式 代码 如 下 : 


.Clear{clear: both; margin:0;padding:0;} 


8.2.5 定位 布局 


定位 布局 的 语法 如 下 : 


position: static|absolute | fixed | relative 


从 定位 的 语法 可 以 看 出 ,定位 的 方法 有 很 多 种 ,分 别 是 静态 (static)、 绝 对 定位 
(absolute) ,固定 (fixed) 、 相 对 定位 (relative)。 下 面 主要 讲解 最 常用 也 是 最 实用 的 两 种 定 
位 方法 : 绝对 定位 (absolute) 和 相对 定位 (relative) 。 


1. 绝对 定位 


要 实现 绝对 定位 ,可 指定 position 属性 的 值 为 absolute。 绝 对 定位 使 对 象 脱离 文档 
流 , 再 为 left、right、top、bottom 等 属性 设置 相应 的 值 , 使 其 相对 于 其 最 接近 的 一 个 有 定位 
设置 的 父 级 对 象 进行 绝对 定位 ; 如 果 对 象 的 父 级 没有 设置 定位 属性 , 即 还 是 遵循 HTML 
定位 规则 ,可 依据 body 对 象 左 上 角 作 为 参考 进行 定位 。 绝 对 定位 对 象 可 层 释 , 层 释 顺 
序 可 通过 z-index 属性 控制 。z-index 的 值 为 无 单位 的 整数 ,大 的 在 最 上 面 ,可 以 是 负 值 。 


2. 相对 定位 


要 实现 相对 定位 ,可 指定 position 属性 的 值 为 relative。 使 用 相对 定位 时 ,对 象 不 可 
层 秋 ,依据 left right,\top .bottom 等 属性 在 正常 文档 流 中 偏 移 自 身 位 置 。 同 样 可 以 用 二 
index 分 层 设计 。 相 对 定位 一 个 最 大 特点 是 : 自己 通过 定位 设置 偏 移 后 还 会 占用 着 原来 
的 位 置 ,不 会 让 给 它 周 围 的 诸如 文档 流 之 类 的 对 象 。 相 对 定位 也 比较 独立 , 它 只 以 自己 本 
身 所 在 位 置 偏 移 。 
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83 任务 实施 


“叮当 网 上 书店 ?的 每 个 页 面 的 布局 与 定位 设计 分 5 个 步 又: 将 样式 表 应 用 到 网 页 ; 
页 面 的 整体 布局 和 样式 设计 ; 头 部 布局 与 定位 设计 ; 中 部 布局 与 定位 设计 ; 底部 布局 与 
定位 设计 。 


8.3.1 首页 布局 与 定位 


1. 新 建 CSS 样式 表 文件 ,应 用 到 首页 中 


(1) 使 用 Dreamweaver 打开 站 点 ,选择 “文件 ”1“ 新 建 "命令 ,在 弹出 的 对 话 框 中 选择 
“空白 页 ”|CSS 选项 , 单 击 “ 创 建 "按钮 ,如 图 8-10 所 示 。 


层 委 祥 式 囊 ICss) 文档 


8-10 ”新 建 外 部 CSS 样式 表 


(2) 按 Ctrl 十 S 键 ,将 文件 保存 在 站 点 的 css 文件 夹 中 ,并 命名 global. css。 

(3) 参照 步骤 (1) 一 (2) ,再 新 建 3 个 CSS 文件, 分 别 命名 为 header. css、footer. css 和 
indexmain. css。 

(4) 打开 index. html, 在 head 标签 中 输入 应 用 外 部 样式 表 的 代码 。 

XHTML 代码 如 下 : 


<link href="css/global. css" rel="stylesheet" type 一 "text/css" /> 
<link href="css/header. css" rel="stylesheet" type="text/css" /> 
<link href="css/footer. css" rel="stylesheet" type= "text/css" /> 
<link href="css/indexmain. css" rel="stylesheet" type="text/css" /> 
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2. 首页 整体 布局 和 样式 


打开 global. css, 设 置 整 体 布局 和 样式 。 
CSS 代码 如 下 : 


* { 
margin:0; 
padding:0; 
} 
/* 全 网 页 固定 宽度 及 居中 * / 
井 container { 
width:985px; 
margin:0 auto; 


} 

#header { 
width:100% ; 

上 

#main { 
width:100% ; 

} 

#footer { 


width:100% ; 
margin-top:20px; 


3. 首页 头 部 布局 与 定位 


(1) 打开 header. css, 在 这 里 首先 需要 设 定 头 部 的 总 体 宽 度 ,并 设置 navlink 区 域 和 
search 区 域 的 宽度 ,高度 和 盒子 模型 的 细节 。 


CSS 代码 如 下 : 

.navlink { 
width:100% ; 
margin:0 0 5px 0; /* 定 义 navlink 区 域 的 下 方 外 边 距 * / 
padding:10px 0; /* 定 义 navlink 区 域 的 上 、 下 内 边 距 */ 


height: 40px; 
/* 重 新 定义 Logo 下 面 的 绿色 横 线 和 离 下 面 的 边 距 * / 
border-bottom: 3px solid #06A87F; 


} 
.search { 

width:100%; 

height:68px; 

margin:0 0 7px 0; /* 定 义 search 区 域 的 下 方 外 边 距 * / 
} 
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(2) 设置 navlink 区 域 navlink_logo、navlink_right、navlink_center 的 左 中 右 横向 布 
局 ,这 里 使 用 浮动 完成 。 
CSS 代码 如 下 : 


.navlink_logof 
float: left; /*Logo 图 片区 域 向 左 浮动 */ 
width:130px; 

} 

.navlink_right{ 
float: right; /* 快速 链接 区 域 向 右 浮动 */ 
width:442px; 

} 

.navlink_center{ 
float: left; /* 导航 区 域 向 左 浮动 * / 
width:410px; 

} 


(3) search 区 域 需 要 另 起 一 行 ,需要 使 用 浮动 的 清理 。 
CSS 代码 如 下 : 
.clear{ 


clear: both; 
} 


(4) 设置 seacher_top 部 分 的 布局 与 定位 。 
CSS 代码 如 下 : 


.seacher_top { 
height:27px; 
} 


提示 : 

(1) 这 里 使 用 float 将 XHTML 对 象 进行 浮动 定位 。navlink_center 中 的 列表 li 也 可 
以 通过 设置 float: left 样式 ,将 3 个 坚 向 列表 项 以 横向 显示 ,宽度 和 高 度 分 别 为 131px 
和 31px。 

(2) searcher_bottom 区 域 中 bottomform .bottomimglink bottomlinkwords 的 横向 
排列 也 可 以 使 用 float 完成 。 


完成 后 , 头 部 布局 和 定位 的 效果 ,如 图 8-11 所 示 。 


"EH "BE " 于 了 9 有 助 中 心 卫 全 底 户 疡 用 户 注册 浊 录 


办 类 : 程 库 设 计 Iab 开 发 区 各 共管 理 |LInuA 茸 习 | 热门 和 芝 : 
叮当 分 类 尖 请 畏 入 你 要 喜 曾 的 关键 词 | 搜索 训 纪 近 过热 站 搜索 


图 8-11 头 部 布局 和 定位 效果 


PNETISQL ServerlPHP 
EE EI EE 
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4. 首页 中 部 布局 与 定位 


中 部 main 部 分 包含 3 部 分 ,分别 为 main_left、main_right、main_center, 这 3 部 分 需 
要 横向 分 布 。 中 部 的 所 有 样式 都 写 在 indexmain. css 文件 中 。 
CSS 代码 如 下 : 


.main_left { 
float: left; 
width: 150px; 

} 

.main_right { 
float: right; 
width:170px; 

} 

.main_center { 
float:left; 
width:665px; 


完成 后 的 效果 如 图 8-12 所 示 。 


， 去 匾 推 荐 是 全 的 图 书 、 最 低 的 价格 尽 在 叮当 同 


er 包括 CW 否 言 元 素 、NET 资 产 管 理 、 使 用 Ch 表达 设计 、 自 娃 二 进 制 明 件 和 使 用 杠 
架 等 ， 人 为 程序 员 提 供 了 改善 CH 和 NET 程 序 的 方法 。 本 书 通过 梅 每 个 条 协 构 建 在 … 


和 Ea, 天 天 特价 


Visual C++ 2005 


编程 实例 精粹 


¥49.0¥29.0 


图 8-12 中 部 布局 与 定位 
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5. 首页 底部 布局 与 定位 


首页 底部 的 所 有 样式 都 写 在 footer. css 文件 中 。 
CSS 代码 如 下 : 


.footer_bottom { 
height: 50px; 

} 

.footer_bottom img { 
margin:0 10px; 

} 


8.3.2 图 书 分 类 页 布局 与 定位 


1. 图 书 分 类 页 整体 布局 


因为 图 书 分 类 页 的 整体 布局 . 头 部 和 底部 的 布局 与 定位 与 首页 相同 ,因此 可 以 直接 使 
用 global. css、header. css 和 footer. css 3 个 样式 表 文 件 。 打 开 class. html, 在 head 标签 
中 输入 应 用 外 部 样式 表 的 代码 。 

CSS 代码 如 下 : 


<link href="css/global. css" rel 王 "stylesheet" type 一 "text/css" /> 
<link href 一 "css/header.css" rel= "stylesheet" type= "text/css" /> 
<link href= "css/footer. css" rel="stylesheet" type= "text/css" /> 


2. 图 书 分 类 页 主体 部 分 布局 与 定位 


新 建 classmain. css 样式 表 文 件 , 将 其 应 用 到 class. html 中 。 打 开 classmain. css 文 
件 ,进行 图 书 分 类 页 主体 部 分 布局 与 定位 。 它 主要 分 成 两 块 ,一 个 是 所 在 位 置 部 分 , 另 一 
个 是 分 类 主体 部 分 。 

(1) 所 在 位 置 区 域 布局 样式 。 

CSS 代码 如 下 : 


.yposition{ 
width:980px; 
height:29px; 
padding:12px 0 0 5px; 
margin:0 auto; 
clear: both; 
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(2) 分 类 主体 部 分 主要 包括 左 侧 列表 区 域 和 右 侧 分 类 信息 区 域 ,这 两 个 区 域 左 、 右 横 
向 放置 ,因此 还 是 使 用 浮动 来 完成 。 
CSS 代码 如 下 : 


.book{ 
width:985px; 
margin:0 auto; 
background: # fff; 
padding:0 0 5px 0; 

} 

.book_left{ 
width:150px; 
padding:5px Opx Opx Opx; 
float: left; 

} 

.Class_wrap { 
width:810px; 
float: right; 
padding-top:5px; 


完成 后 的 效果 如 图 8-13 所 示 。 


您 现在 的 位 置 : 叮当 目 >> 图 分 关 > 列表 GK295) 
图 书 反方 


可 书 是 一 本 者 门 介绍 服务 器 控件 和 明 首 的 开发 与 使 用 的 图 书 。 全 书 共 分 为 33 章 ,分别 介 绍 了 上 ax 控件 和 蛆 件 、ASP NET 20 Web 部 件 控件 、ASP NET 20 
安全 、ASP NET 2 味 格 式 和 分 是 式 数据 天 控件 、ASP NET 2 (表格 式 数据 上 定 控 六 、 自 定义 困 构 导入 扩展 和 Seriall 
2430_ ¥1450 折扣 : 59 折 节省 : 芋 10.20 


C# 入 门 经 典 


图 8-13 图书 分 类 页 主体 部 分 布局 与 定位 
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8.3.3 购物 车 页 布局 与 定位 


购物 车 页 具有 和 首页 头 部 、 底 部 一 样 的 布局 和 定位 效果 ,因此 在 该 页 面 中 要 应 用 这 两 
个 样式 表 文 件 。 购 物 车 页 的 主体 部 分 主要 是 由 表格 完成 布局 的 ,需要 新 建 样式 表 文 件 
shopmain. css, 单 独 编写 相关 样式 代码 。 

购物 车 主体 部 分 没有 左右 浮动 ,而 且 是 由 表格 完成 的 ,布局 比较 固定 ,因此 只 须 对 所 
在 位 置 区 域 的 布局 和 定位 进行 设置 。 

CSS 代码 如 下 : 


.yposition{ 
width:980px; 
padding:12px0 0 5px; 
margin:0 auto; 
clear: both; 

} 


完成 后 的 效果 如 图 8-14 所 示 。 
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84 任务 拓展 


本 任务 重点 介绍 CSS 样式 的 基本 语法 结构 、 盒 子 模型 的 概念 ,以 及 利用 CSS 样式 进 
行 布局 和 定位 的 相关 知识 和 技能 。 通 过 本 任务 的 实施 ,完成 了 首页 .图书 分 类 页 和 购物 车 
页 的 布局 和 定位 ,读者 能 够 基本 掌握 CSS 样式 文件 的 写法 以 及 布局 和 定位 的 方法 。 下 面 
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要 独立 完成 以 下 相关 效果 ,以 熟练 掌握 本 任务 的 相关 知识 和 技能 。 
(1) 图 书 详细 页 的 布局 与 定位 效果 如 图 8-15 所 示 。 


(EE 网 “首页 " Bp "办 购物 竺 | 帮助 中 心 | 我 的 账户 | 新 用 户 注册 | 晤 录 
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图 8-15 图 书 详细 页 的 定位 与 布局 效果 
(2) 注册 页 布局 与 定位 ,效果 如 图 8-16 所 示 。 
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图 书 分 类 : 程序 设计 |tab 开 发 数据库 党 再 |Liasx 入 门 管理 | 热门 娃 索 : Ce |ASP. 了 ET |S9L Sseryer |EIE | 其 好 分 类 : C#|ASP_JNET |S9L Server 


[TP 


叮当 网 “全 球 最 大 的 中 文 网 上 书店 


以 下 均 为 必 填 项 

请 填写 你 的 E-mail 地 址 : je 请 填写 有 效 的 E-sai] 雹 址 ， 在 下 一 步 中 您 拘 用 此 地 箱 接收 验证 邮件。 

设置 您 在 叮当 网 的 嘱 称 ; * 修 的 昵称 可 以 由 小 写 英文 字母 、 中 文 、 数 字 组 成 ,长 度 4~20 个 字符 ， 一 个 汉字 为 两 个 字符 。 
设置 密码 ; [ks 您 的 密码 可 以 由 大 小 写 英文 宇和 三、 数字 组 成 ， 长 度 6 一 20 位 。 

再 次 输入 您 设 置 的 密码 : 


Copyrieht © 阿 当 网 2012-2014, All Rights Reserved Povered By GreatSoft Corp 全 IcPifosl100 


图 8-16 注册 页 布局 效果 
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(3) 登录 页 的 布局 与 定位 效果 如 图 8-17 所 示 。 


WE "首页 + 我 的 呆 当 * 四 2 类 由 和 车 | 相助 中 必 | 入 的 账户 | 新 用 户 注册 | 车 录 
Er 
图 书 分 类 : 程序 设计 fab 开发 | 六 各 库 知 各 |Liasx 入 门 知 玫 | 热门 搜索 : Cs|ASP ET |S9L Server |P 失 | 站 分 类 : 1ASF ETISQL Server 


| 


叮当 网 “全 球 最 大 的 中 文 网 上 书店 


要 

本 用 户 登 录 

En 由 -msi] 地 址 或 申 称 : 
ey 伟 姑 本 5-T 折 ， 其 地 同 3 的 T-5 折 ED: 
es nl. HH | 有 


自 娃 一 人 而 用 己 》> 


i 


"正品 癣 保证 服务 一 站 式 


享受 网 购 乐 趣 , 安 在 


Copyriaht © PJM 2012-2014, A Rithts Rossrvet Powered By GrontSoft Corp, S 了 ICEEotllo0 号 


图 8-17 登录 页 布局 效果 


85 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 掌握 了 CSS 样式 表 的 应 用 方式 和 语法 结构 ,并 理解 了 
盒子 模型 的 概念 ,能 熟练 地 使 用 浮动 布局 方式 进行 网 页 的 整体 布局 。 在 完成 布局 后 需要 
对 网 页 进行 兼容 性 测试 ,测试 在 不 同 浏览 器 下 页 面 效果 是 否 正常 。 对 于 初学 者 来 说 ,还 需 
要 经 过 后 期 大 量 的 练习 才能 达到 熟练 的 程度 。 


86 能 力 评 估 


. 什么 是 CSS 样式 ? 它 的 作用 是 什么 ? 

.CSS 样式 的 选择 器 有 哪些 类 型 ? 它们 如 何 书 写 ? 有 什么 区 别 ? 
.如 何 进 行 CSS 样式 的 集体 声明 和 赃 套 声明 ? 

. 什么 是 盒子 模型 ? 它 的 属性 包括 哪些 ? 

. 在 进行 网 页 布局 时 ,有 哪 3 类 定位 方式 ? 

. margin 属性 细 分 为 哪些 属性 ?应 按照 什么 顺序 设置 ? 

. 什么 是 文档 流 ? 浮动 后 的 文档 流 如 何 显示 ? 


~] 中 辐 由 忆 王 
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任务 9 “叮当 网 上 书店 ?首页 
navink 区 样式 


通过 任务 8 的 实施 ,Bill 已 经 按照 原先 的 设计 稿 完成 了 “叮当 网 上 书店 ”所 有 页 面 的 
整体 布局 和 定位 。 接 下 来 Bill 要 按照 设计 稿 自 上 至 下 分 步 实现 首页 的 最 终 样 式 , 通 过 
CSS 样式 知识 的 学 习 和 技能 的 实践 ,确保 “叮当 网 上 书店 ”项 目的 按期 完成 。 

汉人 学习 目标 

(1) 理解 掌握 使 用 列表 元 素 样 式 实 现 各 种 列表 效果 。 

(2) 理解 掌握 背景 图 片 . 背 景 颜色 的 样式 效果 。 

(3) 理解 掌握 文本 及 段落 的 样式 效果 。 

(4) 理解 掌握 超 链接 及 伪 类 的 样式 效果 。 


91 任务 描述 


首页 navlink 区 主要 有 3 个 模块 ,分 别 是 Logo、 导 航 菜单 和 用 户 快速 导航 。 原 始 效 果 
如 图 9-1 所 示 。 


首页 和 各 动 中 心 了 已 新 用 忆 注 几 擅 录 
D9 
Ea 


9-1 navlink 区 原始 效果 


本 任务 主要 通过 边框 (border) ,浮动 (float) ,列表 元 素 (ul 和 li) .背景 (background)、 
超 链接 (a) ,文本 及 段落 (hn 和 p) 等 样式 的 学 习 和 制作 设计 ,实现 “叮当 网 上 书店 ”首页 
navlink 区 样式 最 终 效果 ,如 图 9-2 和 9-3 所 示 。 


叮当 网 | hE | 可 | 和 00 | 新 有 六 册 | 于 


图 9-2 navlink 区 最 终 效果 (鼠标 指针 未 移 到 导航 菜单 上 ) 


叮当 网 5 dE 况 EW 竺 | 要 助 中 心 | 我 的 账户 | 新 用 户 注册 | 下 对 


图 9-3 navlink 区 最 终 效果 (鼠标 指针 移 到 “我 的 叮当 ”导航 菜单 项 上 ) 
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92 相关 知识 


边框 (border) 浮动 (float) 是 任务 8 中 盒子 模型 的 知识 点 ,本 任务 不 再 详细 介绍 。 通 
过 以 上 两 个 样式 的 控制 (已 知 navlink 区 底部 边框 颜色 为 并 06a87f) ,navlink 区 完成 的 效 
果 如 图 9-4 所 示 。 


困 当 网 "EH " * Bd 购 秽 竺 禾 助 中 必 我 的 陈 忆 新 用 户 注 册 若 录 
CE 


9-4 边框 与 浮动 样式 控制 后 效果 


9.2.1 使 用 列表 元 素 


在 XHTML 中 ,列表 元 素 有 ui( 无 序列 表 ) 和 ol( 有 序列 表 ) 之 分 。 列 表 元 素 中 的 列表 

项 ,是 由 下 控制 的 。 对 于 本 任务 中 导航 菜单 中 的 列表 ,首先 要 解决 列表 的 默认 符号 和 序 
号 。 在 CSS 样式 表 中 ,列表 的 元 素 常用 属性 如 表 9-1 所 示 。 
表 9-1 列表 元 素 的 常用 属性 


属 性 描 述 可 用 值 

list-style-type 
list-style 设置 列表 的 属性 list-style-position 

list-style-image 
list-style-image 设置 图 片 作为 列表 项 目 符号 
list-style-position 设置 项 目 符号 的 放置 位 置 i 

outside 

none 

disc 

circle 

square 
list-style-type 设置 项 目 符号 的 默认 样式 decimal 


lower-roman 
upper-roman 


lower-alpha 


upper-alpha 


9.2.2 背景 控制 


通过 网 站 图 片 素材 的 设计 ,结合 本 任务 的 导航 菜单 的 最 终 效 果 , 可 以 分 析 得 出 ,导航 
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任务 9 “叮当 网 上 书店 ”首页 navlink 区 样式 
菜单 的 3 个 背景 图 片 都 是 不 一 样 的 ,分 别 是 左边 圆 角 背景 图 、 中 间 和 矩形 背景 图 和 右边 圆 角 
背景 图 ,而 背景 图 片 的 尺寸 大 小 是 一 致 的 ,都 是 131pxX31px。 因 此 , 先 需 要 将 3 个 导航 
菜单 项 1i 的 宽 (width) ,高 (height) 设 置 为 131px 和 31px。 在 CSS 中 ,背景 常用 的 属性 如 
表 9-2 所 示 。 


表 9-2 背景 常用 的 属性 


属 性 描 述 可 用 值 
bec ee 设置 背景 图 的 滚动 方式 ,可 以 为 scroll 
ackground-attachmeni 
固定 或 者 随 内 容 滚动 ee 

color-rgb 

background-color 设置 背景 颜色 color-hex 
color-name 
transparent 

i i url 

background-img 设置 背景 图 片 
none 
top left 
top center 
top right 


center left 
center center 
background-position 设置 背景 图 片 的 位 置 center right 
bottom left 
bottom center 
bottom right 
x-% y% 


x-pos y-pos 


repeat 
repeat-x 


background-repeat 设置 背景 图 片 的 平 铺 方式 


repeat-y 


no-repeat 


注 : 背景 图 片 可 用 值 的 URL 必须 为 图 片 的 相对 路 径 。 


提示 : 在 网 站 开发 中 ,项 目 中 所 有 的 路 径 都 采用 相对 路 径 。 


9.2.3 文本 与 段落 样式 


文字 是 网 页 中 的 重要 元 素 ,在 每 个 网 站 中 ,文字 占 90% 左 右 的 页 面 内 容 。 对 于 导航 、 
列表 元 素 而 言 ,文字 需要 设计 得 符合 导航 及 列表 的 需求 .醒目 、 清 晰 、 易 于 操作 。 对 于 大 篇 
幅 的 文章 段落 而 言 , 段 落 中 的 文字 也 需要 进行 合理 排版 与 组 合 ,以 便 用 户 阅读 。 
CSS 支持 的 字体 样式 主要 包括 字体 .字号 .颜色 等 基本 属性 ,以 及 对 其 他 字体 的 微调 
控制 方式 。 在 CSS 中 ,文本 常用 的 属性 如 表 9-3 所 示 。 
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表 9-3 文本 的 常用 属性 


属 性 描 述 可 用 值 
color 设置 文字 的 颜色 color 
设置 文字 名 称 , 可 以 使 用 多 个 名 称 ， 
font-family 或 者 使 用 逗号 分 隔 , 浏 览 器 按照 先后 font-name 
顺序 依次 使 用 可 用 字体 
font-size 设置 文字 的 尺寸 % 
0 
nomal 
font-style 设置 文字 样式 italic 
oblique 
font-weight 设置 文字 加 错 样式 wom 
bold 
none 
texttransform | 设置 英文 文本 的 大 小 写 方式 有 
uppercase 
lowercase 
none 
text-decoration 设置 文本 的 下 划 线 Uo 
line-through 
overline 


在 Web 2.0 中 ,网 站 文本 字体 默认 是 中 文 宋体 ,英文 是 基于 Serif 分 类 的 Times New 
Roman, 大 小 默认 是 12px。 也 由 于 某 些 原因 ,并 非 CSS 对 文本 字体 的 所 有 属性 都 能 产生 


作用 。 


网 站 中 的 最 终 内 容 一 般 都 将 以 文本 段落 的 形式 呈现 给 用 户 ,无 论 是 平面 排版 还 是 网 
络 排版 ,段落 排版 都 具有 某 些 相同 属性 与 特征 。CSS 在 段落 的 控制 方面 有 相当 丰富 的 样 
式 属性 。 在 CSS 中 ,段落 常用 的 属性 如 表 9-4 所 示 。 


表 9-4 段落 的 常用 属性 


属 性 描述 可 用 什 
二 设置 对 象 中 文本 的 行 高 re 
length 
letter-spacing 。 ”| 设置 对 象 中 文字 的 间距 人 
length 
word-spacing 设置 对 象 中 单词 之 间 的 间距 ai 
length 
ed 设置 对 象 中 首 行文 字 的 缩 进 什 mora 
length 
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任务 9 “叮当 网 上 书店 ”首页 navlink 区 样式 


续 表 
属 性 描 述 可 用 值 
auto 
top 
vertical-align 。 ”| 设置 对 象 中 内 容 的 垂直 对 齐 方式 本 
middle 
bottom 
text-bottom 
left 
text-align 设置 对 象 中 文本 的 对 齐 方式 et 
center 
justify 
ee 设置 对 象 中 文本 的 排版 方式 : 横向 或 horizontal 
纵向 排版 vertical-ideographic 
1 
设置 对 象 中 文本 的 换行 方式 。 使 用 i 
ee break-all 时 允许 词 间 进 行 换行 人 
keep-all 
设置 对 象 中 空格 字符 的 处 理 方式 。 normal 
word-break 使 用 nowarp 方式 时 ,将 强制 文本 不 pre 
换行 ,除非 遇 到 一 br /二 标签 nowarp 
使 用 break-work 时 ,如 果 内 容 超 过 其 normal 
0 容器 的 边界 则 发 生 换行 break-word 
visible 
a 当 对 象 中 的 内 容 超过 对 象 显示 范围 auto 
时 ,对 象 本 身 进行 控制 hidden 
scroll 


这 里 并 没有 完全 列举 CSS 段落 控制 的 所 有 属性 ,CSS 对 段落 的 样式 控制 相当 丰 
富 , 但 由 于 中 英文 排版 上 的 差异 ,在 这 些 属 性 中 ,部 分 样式 或 其 取 值 可 能 没有 显示 效 


果 , 这 时 可 以 检查 该 样式 是 否 对 中 文 或 者 英文 同时 起 作用 。 


在 实际 应 用 中 ,一 般 采 用 设置 文本 容器 的 高 度 (height) 和 行 高 (line-height) 相 同 的 值 
来 达到 文本 在 容器 中 垂直 居中 对 齐 ,而 不 采用 vertical-align:middle。 


9.2.4 超 链 接 样式 控制 


整个 网 站 的 内 容 都 是 由 超 链 接 链接 起 来 的 。 无 论 从 首页 到 每 个 频道 ,还 是 进入 其 他 
网 站 ,都 是 由 无 数 超 链接 来 实现 页 面 跳 转 。CSS 对 超 链 接 的 样式 控制 是 通过 4 个 伪 类 来 
实现 的 ,每 个 伪 类 用 于 控制 超 链接 的 一 种 状态 的 样式 。 在 CSS 中 , 超 链接 的 4 个 伪 类 如 


表 9-5 所 示 。 
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表 9-5 超 链 接 的 4 个 伪 类 


伪 类 用 途 

a:link 设置 超 链接 对 象 未 被 访问 的 样式 
a:visited 设置 超 链接 对 象 被 访问 后 的 样式 
a:active 设置 超 链接 鼠标 左 键 按 下 时 的 样式 
a:hover 设置 超 链接 在 鼠标 指针 移 上 时 的 样式 


在 实际 应 用 中 ,有 时 为 了 编码 上 的 简单 ,我 们 经 常 直接 使 用 a 而 不 是 a:link 来 编写 样 
式 编码 ,尽管 有 时 候 它 们 的 最 终 效果 完全 相同 。 如 果 超 链接 访问 前 和 访问 后 效果 一 致 , 一 
般 只 设置 a 的 样式 ,而 不 设置 a; link、a: visited 伪 类 的 样式 。 对 a:active 的 使 用 很 少 , 毕 
况 单 击 与 释放 之 间 的 动作 非常 快 。 


93 任务 实施 


整个 navlink 区 的 设计 分 3 个 部 分 : Logo 图 片 模块 .导航 菜单 模块 .用 户 快速 导航 模 
块 。 整 个 navlink 区 的 XHTML 结构 代码 如 下 : 


<div class= "navlink"> 
<div class= "navlink_logo"> 
<a href="index. html"> <img src="images/logo. png” width="87" height="40" 
alt 二 "叮当 网 上 书店 " class 二 "logoborder" /二 一 /a> 
</div> 
<div class= "navlink_right"> 
过 a href 二 "# "购物 车 <</a 二 | 
过 a href 一 "# "之 帮助 中 心 </a> | 
过 a href 二 "# "过 我 的 账户 过 /a 二 | 
过 a href 一 "# "之 新 用 户 注册 二 /a 二 | 
过 a href 二 "#" 志 登录 </a> 
</div> 
div class= "navlink_center"> 
<u> 
<li><a href 一 "# ”class 一 "aleft" 之 首页 <</a>><</1i> 
< 一 li 盖 <<a href 王 "# ”class 一 "acenter" 过 我 的 叮当 一 /a> 一 /li 
< 一 li 这 <<a href 一 "# ”class 一 "aright" 过 图书 分 类 < 天 /a>></1i> 
</u> 
</div> 
<div class= "clear"></div> 
</div> 


本 任务 完成 后 ,整个 navlink 区 的 CSS 样式 代码 如 下 : 


160 


任务 9 “叮当 网 上 书店 ” 首 


.navlink{ 
margin:0 0 5px 0; 
padding:10px 0; 
height: auto; 

} 

.navlink_logof 
float: left; 
width:130px; 

} 

.navlink_right{ 
float: right; 
width:442px; 


} 

.navlink_center{ 
float: left; 
width:410px; 

} 

.clear{ 
clear: both; 
margin:0; 
padding:0; 

} 

.navlink_center ul{ 
margin:0; 
padding:0; 

} 

.navlink_center ul li{ 
float: left; 
width:131px; 
height:31px; 

} 


整个 navlink 区 的 效果 如 图 9-5 所 示 。 


i “ 


图 9-5 首页 navlink 区 的 效果 


9.3.1 首页 navlink 区 Logo 图 片 样式 


对 “叮当 网 上 书店 ”首页 最 终 效 果 进 行 分 析 后 可 以 发 现 ,Logo 


页 navlink Sa 


E :3 


图 片 模块 要 解决 两 个 问 


题 ,一 是 Logo 图 片 的 超 链接 边框 要 去 掉 ; 二 是 要 使 Logo 图 片 是 
解决 这 两 个 问题 ,要 用 到 盒子 模型 的 border、padding 属性 。 


有 左 侧 有 15px 的 间距 。 
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CSS 代码 如 下 : 


/* 新 增 Logo 图 片 的 . logoborder 样式 */ 
. logoborder{ 


border: none; 


} 
/* 修改 .navlink_logo 样式 * / 
.navlink_logo{ 
float: left; 
padding-left:15px; 
width: T7153px; /* 确保 整个 navink_1ogo 的 宽度 保持 730px * 人/ 
} 


完成 后 ,navlink 区 效果 如 图 9-6 所 示 。 


四 当 网 下 * Bp " 4 则 过 主 帮助 中 心 我 的 账户 末 用 户 注册 晤 录 


9-6 ”navlink 区 Logo 图 片 完 成 后 效果 


9.3.2 首页 navlink 区 导航 菜单 样式 


对 “叮当 网 上 书店 ”首页 最 终 效果 进行 分 析 后 可 以 发 现 , 导 航 菜单 模块 要 解决 4 个 问 
题 : 列表 元 素 的 默认 符号 去 除 .背景 图 的 控制 , 超 链接 伪 类 控制 和 文本 字体 效果 。 下 面 依 


1. 列表 元 素 的 默认 符号 去 除 
CSS 代码 如 下 : 


/* 通 过 修改 .navlink_center ul 样式 来 实现 * / 
.navlink_center ul{ 

margin:0; 

padding:0; 

liststyle-type:none; 


2. 背景 图 的 控制 


在 实际 应 用 中 ,背景 图 的 控制 一 般 要 使 用 3 个 属性 ,分 别 是 图 片 路 径 (background- 
img) 、 图 片 位 置 (background-position) 和 图 片 重复 (background-repeat)。 本 导航 菜单 的 
案例 中 ,由 于 3 个 导航 菜单 所 采用 的 背景 图 片 不 一 致 ,所 以 在 XHTML 结构 代码 中 加 入 
3 个 样式 接口 ,分 别 是 class 二 "aleft"、class 二 "acenter" 和 class 一 "aright"。 
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CSS 实现 代码 如 下 : 


/* 新 增 .aleft 样式 ,解决 左 侧 背 景 图 效果 * / 

.aleft{ 
background-image:url(. . /images/headnav_left. png); 
background-position :left top; 
background-repeat:no-repeat; 

} 

/x* 新 增 .acenter 样式 ,解决 中 间 背 景 图 效果 * / 

.acenter{ 
background-image:url(. . /images/headnav_center. png) ; 
background-position :left top; 
background-repeat:no-repeat; 


} 

/* 新 增 样式 .aright, 解 决 右 侧 背景 图 效果 x / 

.aright{ 
background-image:url(. ./images/headnav_right. png) ; 
background-position :left top; 


background-repeat:no-repeat; 


} 


通过 以 上 背景 图 控制 后 ,可 得 到 目前 navlink 区 导航 菜单 模块 的 效果 ,如 图 9-7 所 示 。 


图 9-7 背景 图 控制 后 navlink 区 导航 菜单 效果 


对 以 上 效果 图 和 “叮当 网 上 书店 ”首页 最 终 效果 图 进行 对 比 可 以 发 现 ,这 个 效果 是 不 
符合 要 求 的 。 其 原因 是 a 标签 容器 是 一 个 行内 元 素 , 它 自身 的 宽度 (width) 和 高 度 
(Cheight) 跟 容器 内 容 的 宽 高 相同 造成 的 。 因 此 ,首先 要 设置 a 标签 容器 的 宽 ,高 样式 。 

CSS 代码 如 下 ， 


/* 新 增 .navlink_center a 样式 ,解决 行内 元 素 a 标签 容器 的 尺寸 问题 * / 
.navlink_center af 

height:31px; 

width:131px; 
} 


从 以 上 CSS 代码 发 现 ,导航 菜单 区 的 效果 没有 发 现任 何 改变 的 迹象 ,似乎 问题 又 出 
现 了 ,对 行内 元 素 设置 宽 高 样式 不 起 任何 作用 。 针 对 以 上 问题 ,CSS 专门 有 一 个 解决 方 
案 , 就 是 将 行内 元 素 转换 成 块 级 元 素 , 从 而 实现 容器 的 固定 尺寸 问题 。 在 CSS 中 ,页 面 对 
象 显示 方式 的 属性 如 表 9-6 所 示 。 
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表 9-6 页 面 对 象 显示 方式 的 属性 


属 性 可 用 值 描 述 
block 将 对 象 显示 为 盒 状 , 后 一 个 对 象 换行 显示 
none 不 显示 对 象 
display inline 行 间 内 联 样式 ,将 对 象 排 列 成 一 行 ,后 一 对 象 继续 连接 此 对 象 显示 
inline-block 对 象 显 示 为 块 状 ,但 能 呈现 内 联 样式 
list-item 将 对 象 作 为 列表 项 显示 
修改 后 的 CSS 样式 代码 如 下 : 


/* 修 改 .navlink_center a 样式 ,实现 容器 固定 尺寸 */ 
.navlink_center a{ 

display: block; 

height: 31px; 

width:131px; 
} 


修改 后 ,效果 如 图 9-8 所 示 。 
a ; i 
四 过 网 
图 9-8 导航 菜单 背景 控制 后 的 效果 


3. 超 链 接 伪 类 控制 


通过 对 “叮当 网 上 书店 ”首页 最 终 效果 的 分 析 可 以 发 现 ,导航 菜单 要 实现 鼠标 指针 移 
上 去 时 背景 图 的 切换 效果 。 因 此 ,设置 :hover 超 链接 伪 类 进行 背景 控制 ,就 能 顺利 解决 
这 个 问题 。 

CSS 代码 如 下 : 


/* 新 增 . aleft:hover 样式 ,实现 左 侧 背 景 图 鼠标 指针 移 上 去 时 的 切换 效果 * / 
.aleft:hover{ 
background-image:url(. ./images/headnav_hoverleft. jpg) ; 
background-position :left top; 
background-repeat:no-repeat; 
} 
/ * 新 增 样式 .acenter:hover, 实 现 中 间 背 景 图 鼠标 指针 移 上 去 时 的 切换 效果 x* / 
.acenter:hover{ 
background-image:url(../images/headnav_hovercenter. jpg) ; 
background-position :left top; 
background-repeat:no-repeat; 
} 
/* 新 增 样式 .aright:hover, 实 现 右 侧 背 景 图 鼠标 指针 移 上 去 时 的 切换 效果 * / 
.aright:hover{ 
background-image:url(. ./images/headnav_hoverright. jpg) ; 
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background-position :left top; 
background-repeat:no-repeat; 


4. 文本 字体 效果 
按照 "叮当 网 上 书店 ?首页 最 终 效果 要 求 , 导 航 菜单 对 文本 字体 的 控制 主要 有 大 小 、 颜 
色 ,水 平和 垂直 对 齐 方式 等 属性 ; 当 鼠 标 指针 移 到 导航 菜单 上 时 ,文本 字体 还 有 下 划 线 


属性 。 
CSS 代码 如 下 : 


/* 修 改 .navlink_center a 样式 ,实现 文本 字体 显示 样式 效果 x*/ 
.navlink_center a{ 
display: block; 
height: 31px; 
width:131px; 
Uine-height:31px; /x* 实现 垂直 居中 对 齐 */ 
Lexrtalign:center; 
color: #//f: 
font-sizer 14pxs 
text-decoration :nones 


} 
/* 增 加 .navlink_center a:hover 样式 ,实现 鼠标 指针 移 到 导航 菜单 上 时 ,文本 有 下 划 线 * / 


.navlink_center a:hover{ 
text-decoration: underline; 


/* 忌 标 指针 未 移 到 导航 菜单 上 时 , 文本 无 下 划 线 */ 


} 
通过 以 上 4 个 步骤 ,首页 navlink 区 的 现 效 果 如 图 9-9 所 示 。 


叮当 网 PE 帮助 中 心 和 了 户 打 用 户 注 册 | 条 对 


9-9 navlink 区 导航 菜单 最 终 效果 


9.3.3 首页 navlink 区 用 户 快速 导航 样式 


对 “叮当 网 上 书店 ”最 终 效果 进行 分 析 后 可 以 发 现 ,这 个 模块 要 解决 3 个 问题 : 一 是 
背景 图 控制 ; 二 是 模块 上 方 的 间距 和 导航 链接 之 间 的 间距 ; 三 是 整个 文本 水 平 右 对 齐 。 
CSS 代码 如 下 : 


/* 修 改 .navlink_right 样式 ,解决 背景 图 控制 ,模块 上 方 的 间距 和 文本 水 平 右 对齐 问 题 * / 


.navlink_right{ 
float: right; 
width:442px; 
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height: 40pxr; 人 * 高 度 值 由 Logo 图 片 的 高 度 决定 */ 
Uine-height :40pxs 人 * 实现 文本 超 链 接 居中 显示 */ 
Background-image:url(. ./tmages/top-gwc. gif); 
background-position: 120px TOpxs 
Background-repeart:no-repeats 
Lext-align:right; 人 * 文 本 水 平 右 对 齐 */ 
} 
/* 新 增 .navlink_right a 样式 ,解决 导航 链接 之 间 的 间距 问题 */ 
.navlink_right a{ 
margin-left:5px; 
margin-right: 5px; 


} 


完成 本 模块 的 CSS 样式 设计 后 ,叮当 网 上 书店 首页 navlink 区 的 最 终 效果 已 经 实 
现 ,如 图 9-10 所 示 。 


叮当 网 mem lm 7 ，3 有 中心 3 二 己 到 用 Pt 朋 | 到 好 


图 9-10 首页 navlink 区 最 终 效 果 


94 任务 拓展 


本 任务 的 所 有 实现 过 程 都 是 基于 I 下 浏览 器 的 。 目 前 网 络 上 浏览 器 种 类 比较 多 , 除 
IE 6.0 一 IE 9.0 等 版 本 外 ,还 有 其 他 如 Firefox、Chrome、Safari、Opera、 搜 狗 、360 安全 浏 
览 器 等 ,由 于 用 户 使 用 的 浏览 器 不 一 致 ,要 确保 网 站 开发 后 ,能 够 尽量 避免 因 浏览 器 对 
CSS 解析 结果 的 不 一 致 而 造成 的 网 站 显示 结果 差异 ,就 必须 要 求 网 站 开发 设计 人 员 在 开 
发 过 程 中 , 尽 可 能 地 把 网 站 在 多 种 浏览 器 下 进行 测试 和 CSS 样式 调试 。 

“叮当 网 上 书店 ”的 其 他 页 面 的 头 部 navlink 区 跟 首 页 的 navlink 区 是 相同 的 ,因此 读 
者 能 够 在 首页 navlink 区 样式 实现 后 ,再 选取 1 一 2 个 页 面 的 navlink 区 进行 实现 ,以 使 知 
识 和 技能 得 到 巩固 。 其 他 页 面 则 可 以 采用 公用 样式 表 来 实现 效果 。 对 于 首页 search 区 、 
center 区 两 个 有 相同 效果 的 样式 ,应 举一反三 ,认真 独立 完成 效果 。 

提示 : 对 于 各 种 浏览 器 对 CSS 支持 和 解析 问题 ,可 以 到 网 上 参考 CSS hack 部 分 的 知 
识 , 也 可 以 采用 一 些 软件 或 者 插件 来 检查 或 核查 ,如 Firefox 浏览 器 下 面 的 Firebug 插件 。 
在 实际 开发 中 ,一 般 采 用 最 基本 、 最 通用 的 样式 来 实现 网 页 的 效果 。 


95 任务 小 结 
通过 本 任务 的 学 习 和 实践 ,Bill 已 经 基本 了 解 和 掌握 了 网 站 列表 元 素 、 背 景 ,文本 及 


段落 、 超 链接 等 部 分 的 样式 控制 。 对 于 初学 者 来 说 ,还 需要 经 过 后 期 大 量 的 练习 才能 达到 
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熟练 的 程度 。 其 中 一 些 行业 的 实际 使 用 规范 跟 书面 理论 有 些 冲 突 , 需 要 自身 学 习 掌握 , 尽 
量 贴 近 实 际 工作 环境 进行 技能 锻炼 。 


nn 上 oo 


96 能 力 评 估 


. 去 除 列 表 默 认 图 标的 样式 是 什么 ? 

. 设置 背景 图 片 需要 使 用 哪些 样式 ? 

. 背景 图 片 和 背景 颜色 的 区 别 是 什么 ? 

. 超 链接 分 别 有 哪 些 伪 类 ? 每 个 伪 类 代表 什么 状态 ? 
. 文字 及 段落 有 哪些 样式 ? 文字 居中 采用 什么 样式 ? 
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通过 对 任务 9 的 实现 ,Bill 理解 并 掌握 了 对 CSS 样式 中 的 列表 元 素 . 背 景 图 片 和 颜 
色 文本 及 段落 和 超 链 接 及 伪 类 的 样式 及 相关 制作 效果 。 下 面 ,Bill 将 带领 大 家 一 起 继续 
实现 首页 search 区 的 样式 效果 ,学 习 圆 角 背 景 和 表单 样式 的 部 分 知识 及 内 容 。 

让 学 习 目标 

(1) 掌握 圆 角 背景 设计 和 实现 方法 。 

(2) 掌握 表单 UI 布局 设计 技巧 。 

(3) 理解 表单 常用 表单 元 素 的 样式 效果 。 


101 任务 描述 


首页 search 区 的 主要 功能 是 使 用 户 能 够 快速 进行 分 类 检索 和 快速 进行 模糊 或 者 精 

确 的 站 内 检索 。 本 区 域 主要 分 为 上 下 两 个 部 分 ,分 别 是 热点 、 重 点 关键 词 分 类 区 和 表单 快 
速 检索 区 。 原 始 效果 如 图 10-1 所 示 。 

区 过 网 HE as East | aa | HS | 邮 


rex 和 ALTE 的 入 索 : CEASPXET SQL SerrstPHP 其 他 分 类: GEASPNET SOL serum 


图 书 分 类 : 理 民 iitiqsb 开 闪 孝 扫 医 条 

休 当 图 书 ] 请 输入 要 查询 的 关 庚 词 。 搜 生 
ER 

得 守 

光 站 过 ;关机 | 执 扫 2 认 拉 ; 热 提 的 提 人 i 拓 6iA 


10-1 search 区 原始 效果 


其 中 ,上 面部 分 效果 是 任务 9 实施 后 的 效果 。 任 务 10 主要 就 是 将 search 区 的 效果 
实现 为 设计 稿 的 最 终 效果 。 在 任务 10 的 实现 过 程 中 ,以 前 学 过 的 知识 肯定 还 会 用 到 ,在 
新 的 章节 中 ,本 书 将 不 再 进行 详细 讲解 ,比如 任务 8 的 布局 与 定位 ,任务 9 的 背景 图 片 和 
颜色 ,列表 、 超 链接 及 伪 类 和 文本 及 有 段落 等 ,读者 肯定 还 会 在 以 后 任务 中 一 直 使 用 到 。 本 
任务 主要 通过 学 习 圆 角 背 景 的 设计 思路 及 表单 各 元 素 的 样式 效果 ,实现 本 任务 的 最 终 效 
果 , 如 图 10-2 所 示 。 


CEL 国 [ 于 当 刘 区 失 拉 ; 扫 振 。 锥 扫 5 热 拉 8 执 失 


图 10-2 search 区 最 终 效果 
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102 相关 知识 


本 任务 中 要 用 到 模块 定位 与 布局 . 超 链接 .背景 图 片 和 颜色 .文本 及 段落 等 样式 效果 ， 
一 方面 是 对 前 面 任务 知识 点 的 复习 与 巩固 , 另 一 方面 是 对 前 面 所 学 样式 效果 的 熟练 使 用 
及 掌握 。 


10.2.1 圆 角 背景 控制 


网 站 设计 中 最 常用 的 一 种 设计 方案 就 是 圆 角 图 案 。 一 个 文字 块 一 个 区 域 经 常会 使 
用 圆 角 来 进行 设计 ,以 提升 它们 的 视觉 效果 。 

圆 角 矩形 样式 的 设计 原理 源 于 九宫 格 技术 。 在 一 个 3X3 的 表格 中 ,左上 、 右 上、 右 
下 左下 分 别 放 入 4 个 圆 角 图 案 , 内 容 放置 在 中 间 的 方 格 中 ,其 上 、 下 左右 4 个 方向 的 方 
格 可 分 别 放 入 用 于 拉 伸 的 图 案 , 最 终 形 成 一 种 可 任意 变化 大 小 的 圆 角 方 框 。 

九宫 格 技术 是 软件 外 观 设 计 中 常用 的 技术 ,包括 常用 的 Windows 软件 。 特 别 是 
Windows XP 窗口 基本 上 都 使 用 了 九宫 格 进行 样式 设计 ,如 图 10-3 所 示 。 

在 本 任务 中 ,主要 实现 search 区 上 部 分 的 圆 角 背 景 效果 ,主要 是 左上 方 和 右上 方圆 
角 背 景 效 果 。 因 此 ,只 要 在 九宫 格 技术 的 基础 上 ,进行 简单 的 改进 设计 ,把 九宫 改 成 三 富 ， 
左 、 右 分 别 用 固定 圆 角 图 片 实现 圆 角 背景 效果 ,中 间 采 用 背景 图 ,在 X 轴 上 的 平 铺 ,实现 
整个 圆 角 背景 效果 的 任意 长 度 ,就 能 实现 本 任务 中 的 效果 。 重 新 设计 过 的 效果 如 图 10-4 
所 示 。 


content 
content 


图 10-3 九宫 格 技术 原理 图 图 10-4 改进 后 的 九宫 格 技术 图 示 


提示 : 圆 角 背景 的 设计 一 般 都 可 以 分 为 背景 图 片 和 纯 CSS 样式 两 种 实现 方式 。 本 任 
务 中 主要 采用 背景 图 片 来 实现 。 要 使 用 纯 CSS 样式 实现 圆 角 背景 效果 ,可 以 查看 网 络 或 
者 其 他 教材 相关 内 容 ; 或 在 网 络 搜索 引擎 中 ,输入 关键 词 “ 纯 CSS 贺 角 背景 ”。 


10.2.2 表单 UI 设计 效果 


表单 是 功能 型 网 站 中 经 常 使 用 的 元 素 ,也 是 网 站 交互 中 最 重要 的 因素 。 在 网 页 中 ,小 
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到 搜索 框 与 搜索 按钮 ,大 到 用 户 注 册 表 单 . 用 户 控制 面板 ,都 需要 使 用 表单 及 其 表单 元 素 
进行 设计 。 

重要 的 表单 元 素 有 button (按钮 )、input (单行 文本 框 )、textarea( 多 行文 本 框 )、 
listbox( 列 表 框 )、select( 下 拉 列 表 ) 、radio( 单 选 按钮 ) 以 及 checkbox( 复 选 按钮 ) 等 。 也 可 
以 用 小 图 片 来 代替 按钮 ,只 要 将 图 片 做 成 按钮 样式 ,再 为 它 添加 超 链接 即 可 。 

表单 元 件 用 来 收集 用 户 信息 ,帮助 用 户 进行 功能 性 控制 ,表单 的 交互 设计 与 视觉 设计 
都 是 网 站 设计 中 的 重 中 之 重 。 从 表单 视觉 设计 上 看 ,经 常 需 要 摆脱 XHTML 默认 提供 的 
粗糙 视觉 样式 ,重新 设计 更 多 美观 的 表单 元 素 。 

另 一 方面 ,在 表单 布局 上 ,也 需要 通过 设计 不 断 进行 优化 ,帮助 用 户 创造 一 个 良好 的 
便于 使 用 的 表单 。 当 然 ,CSS 也 提供 了 相应 的 样式 支持 ,以 帮助 用 户 改善 表单 的 视觉 
效果 。 


1. 表单 布局 设计 


表单 的 布局 指 表单 在 页 面 显示 中 的 排版 形式 ,我 们 有 必要 将 精心 设计 的 各 个 元 件 按 
照 功 能 及 页 面 样式 要 求 ,分 别 放置 在 特定 的 位 置 上 。 整 齐 友 好 的 表单 正 是 设计 的 目标 。 

对 于 一 些 大 型 门户 网 站 ,良好 的 注册 表单 是 其 吸引 用 户 、 带 给 用 户 好 感 的 关键 所 在 。 
从 表单 整体 上 来 说 , 越 少 的 输入 框 及 选项 , 越 简 洁 的 操作 步 又 ,更 能 够 增加 用 户 的 好 感 ,使 
用 户 不 会 因为 复杂 的 表单 而 停 下 注册 的 脚步 。 在 这 一 点 上 ,目前 国外 许多 新 兴 网 站 都 在 
尝试 使 用 简洁 的 表单 样式 ,最 终 只 保留 用 户 名 、 密 码 ,E-mail、 密 码 提 示 等 少量 而 基本 的 选 
项 ,以 便 尽量 留 住 用 户 。 对 于 “叮当 网 上 书店 "电子 商务 平台 ,用 户 量 的 高 低 , 直接 决定 了 
网 站 运行 .赢利 等 关键 因素 。 因 此 ,本 项 目 中 ,对 于 表单 的 设计 ,也 遵循 了 以 下 的 原则 。 

(1) 一 致 性 原则 

应 坚持 以 用 户 体验 为 中 心 设 计 原 则 ,使 界面 直观 ,简洁 ,操作 方便 快捷 ,用 户 对 界面 上 
对 应 的 功能 一 目 了 然 、. 不 需要 太 多 培训 就 可 以 方便 浏览 网 站 。 

@ 字体 。 保 持 字体 及 颜色 一 致 ,避免 一 套 主题 出 现 多 种 字体 ; 不 可 修改 的 字段 , 统 
一 用 灰色 文字 显示 。 

@ 对 齐 。 保 持 页 面 内 元 素 对 齐 方式 一 致 ,如 无 特殊 情况 应 避免 同一 页 面 出 现 多 种 数 
据 对 齐 方式 。 

@ 表单 录入 。 在 包含 必 填 与 选 填 选 项 的 页 面 中 ,应 在 必 填 项 旁边 给 出 醒目 标识 
(¥%* )。 各 类 型 数据 输入 应 限制 文本 类 型 ,并 做 格式 校 验 如 电话 号 码 只 允许 输入 数字 、 邮 箱 
地 址 需要 包含 “@” 等 ,在 用 户 输 入 有 误 时 给 出 明确 提示 。 

@ 光标 形状 。 可 单 击 的 按钮 .链接 需要 切换 光标 形状 至 手 状 。 

@ 保持 功能 及 内 容 描述 一 致 。 避 免 同一 功能 描述 使 用 多 个 词汇 ,如 编辑 和 修改 、 新 
增 和 增加 、 删 除 和 清除 混用 等 。 建 议 在 项 目 开 发 阶段 建立 一 个 产品 词典 ,包括 产品 中 常用 
术语 及 描述 ,设计 或 开发 人 员 严 格 按照 产品 词典 中 的 术语 词汇 来 展示 文字 信息 。 

(2) 准确 性 原则 

使 用 一 致 的 标记 、 标 准 缩写 和 颜色 ,显示 信息 的 含义 应 该 非常 明确 ,用 户 不 必 再 参考 
其 他 信息 源 。 显 示 有 意义 的 出 错 信息 .而 不 是 单纯 的 程序 错误 代码 。 避 人 免 使 用 文本 输入 
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框 来 放置 不 可 编辑 的 文字 内 容 , 不 要 将 文本 输入 框 当 作 标 签 使 用 。 使 用 缩 进 和 文本 来 畏 
助理 解 。 使 用 用 户 语 言词 汇 ,而 不 是 单纯 的 专业 计算 机 术语 。 高 效 地 使 用 显示 器 的 显示 
空间 ,但 要 避免 空间 过 于 拥挤 。 保 持 语 言 的 一 致 性 ,如 “确定 ”对 应 “取消 ”,“ 是 ”对 应 “ 否 ”。 

(3) 布局 合理 化 原则 

在 进行 UI 设计 时 需要 充分 考虑 布局 的 合理 化 问题 ,遵循 自 上 向 下 、 自 左 向 右 浏 览 、 
操作 习惯 ,避免 常用 业务 超 链 接 排列 过 于 分 散 而 造成 用 户 鼠 标 移动 距离 过 长 的 弊端 。 多 
做 “减法 ”运算 ,将 不 常用 的 功能 区 块 隐藏 ,以 保持 界面 的 简洁 ,使 用 户 专 注 于 主要 业务 操 
作 流 程 。 

Q@ 菜单 。 保 持 菜单 简洁 性 及 分 类 的 准确 性 ,避免 菜单 深度 超过 3 层 。 

@ 按钮 。 确 认 操 作 按钮 放置 左边 ,取消 或 关闭 按钮 放置 于 右边 。 

@ 功能 。 未 完成 的 功能 必须 隐藏 处 理 , 不 要 置 于 页 面 内 容 中 ,以 免 引 起 误会 。 

@ 排版 。 所 有 文字 内 容 排 版 避免 贴 边 显示 (页 面 边缘 ) ,尽量 保持 10 一 20 像素 的 间 
距 并 在 垂直 居中 对 齐 ; 各 控件 元 素 间 也 保持 至 少 10 像素 以 上 的 间距 ,并 确保 控件 元 素 不 
紧 贴 于 页 面 边沿 。 

@ 表格 数据 列表 。 字 符 型 数据 保持 左 对 齐 ,数值 型 右 对 齐 (方便 阅读 对 比 ), 并 根据 
字段 要 求 ,统一 显示 小 数位 位 数 。 

@ 滚动 条 。 页 面 布 局 设计 时 应 避免 出 现 横向 滚动 条 。 

@ 页 面 导航 。 在 页 面 显眼 位 置 应 该 出 现 导航 栏 , 让 用 户 知道 当前 所 在 页 面 的 位 置 ， 
并 明确 导航 结构 。 

@ 信息 提示 窗口 。 信 息 提示 窗口 应 位 于 当前 页 面 的 居中 位 置 ,并 适当 弱化 背景 层 以 
减少 信息 干扰 ,让 用 户 把 注意 力 集中 在 当前 的 信息 提示 窗口 。 一 般 做 法 是 在 信息 提示 窗 
口 的 背面 加 一 个 半 透 明 颜色 填充 的 咕 单 层 。 

(4) 系统 响应 时 间 原 则 

系统 响应 时 间 应 该 适中 ,响应 时 间 过 长 ,用户 就 会 感到 不 安 ; 而 响应 时 间 过 快 也 会 影 
响 到 用 户 的 操作 节奏 ,并 可 能 导致 错误 。 因 此 在 响应 时 间 上 坚持 如 下 原则 ; 2 一 5 秒 显 示 
处 理 信息 提示 ,避免 用 户 误 认为 没 响应 而 重复 操作 ; 5 秒 以 上 显示 处 理 窗口 ,或 显示 进度 
条 ; 一 个 长 时 间 的 处 理 完成 时 应 给 予 完成 提示 信息 。 


2. 改变 输入 框 及 文本 框 样式 


网 页 中 的 表单 由 表单 中 的 文本 及 表单 中 的 表单 元 素 组 成 ,输入 框 及 文本 域 是 Web 表 
单 最 常 使 用 的 元 件 。 每 个 浏览 器 对 表单 元 素 都 有 其 默认 的 外 观 样式 ,比如 I 浏览 器 , 它 
的 基本 样式 是 非常 简陋 的 。 在 早期 的 网 页 设计 中 ,CSS 尚未 普及 ,人 们 一 直 沿 用 IE 默认 
的 表单 基本 样式 。 自 从 CSS 开始 应 用 以 来 ,网 页 设计 者 就 一 直 尝 试 改 变 表单 的 外 观 。 最 
基本 的 改观 便 是 使 文本 框 目下 变 为 实 线条 样式 ,并 添加 更 为 丰富 的 边框 颜色 及 背景 色 
效果 。 

对 于 XHTML 中 的 每 个 显示 元 素 ,CSS 基本 上 都 提供 了 对 border 属性 的 支持 。 
border 属性 从 样式 上 来 看 主要 有 3 个 部 分 . 即 border-color、 border-style 和 border- 
width 。 
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文本 域 相对 于 输入 框 来 说 ,其 实 是 外 观 相同 的 两 个 元 素 ,唯一 区 别 是 文本 域 所 占 的 空 
间 要 大 于 文本 框 并 带 有 滚动 条 。 同 样 , 用 户 可 以 应 用 与 文本 框 相同 的 边框 及 背景 来 改变 
文本 域 的 视觉 效果 。 


3. 改变 按钮 样式 


按钮 是 表单 不 可 或 缺 的 元 素 , 对 于 按钮 ,同样 可 以 通过 与 文本 框 相同 的 边框 背景 色 
及 图 片 等 方式 进行 外 观 样式 设计 。 比 如 本 任务 中 的 "搜索 ? 即 是 一 个 图 片 按钮 ,首先 选用 
一 张 JPG 或 者 GIF 图 片 ,然后 对 其 设置 背景 图 片 样式 来 实现 。 设 计 出 更 加 醒目 的 表单 按 
钮 ,可 以 提高 用 户 的 操作 方便 和 准确 性 。 


4. 使 用 label 标签 提升 表单 可 用 性 


对 于 单 选 按钮 和 复 选 框 ,通常 需要 用 户 用 鼠标 精确 地 点 到 小 框 或 者 小 圆圈 上 才能 够 
完成 交互 响应 。 长 期 使 用 也 许 会 觉得 这 是 一 件 非常 麻烦 的 事 , 似 乎 觉得 计算 机 非常 不 智 
能 ,非得 强制 用 户 精确 地 移动 鼠标 。 

表单 可 用 性 问题 便 浮现 出 来 ,一 个 不 方便 用 户 操 作 的 表单 是 不 可 取 的 。 无 论 如 何 设 
计 ,都 要 以 用 户 使 用 体验 为 第 一 目标 。 除 了 前 面 提 到 的 设计 简洁 的 表单 ,再 就 是 操作 上 的 
轻松 自如 。XHTML 提供 了 一 个 改善 表单 交互 问题 的 标签 label, 早 期 很 少 有 人 使 用 这 个 
标签 ,但 它 却 能 够 对 表单 的 设计 产生 极 大 的 帮助 。label 标签 使 用 for 属性 与 表单 元 素 进 
行 配 合 , 从 而 让 表单 元 件 的 操作 非常 简便 。 可 见 ,label 标签 是 提升 表单 可 用 性 的 简单 易 
行 的 好 办 法 ,建议 尽 可 能 地 用 这 个 标签 , 它 将 会 使 表单 的 操作 更 加 顺畅 方便 。 

注意 : label 标签 的 for 属性 与 表单 元 件 中 的 id 属性 值 相 同 , 其 中 for 属性 用 于 指定 
该 标签 所 关联 的 表单 元 素 , 单 击 该 标签 的 同时 ,该 元 素 也 会 得 到 响应 。 


103 任务 实施 


整个 search 区 的 设计 步骤 分 两 个 阶段 ,分别 是 上 面部 分 的 圆 角 背景 设计 和 下 面部 分 
的 表单 及 表单 元 素 的 设计 。 整 个 search 区 的 XHTML 结构 代码 如 下 : 


<div class= "search"> 
<div class= "seacher_top"> 

<div class= "yuanjiao_left"><=/div> 

div class= "yuanjiao_right"></div> 

二 div class 一 "yuanjiao_center" 二 图书 分 类 : 二 a href 王 "# " 盖 程序 设计 一 /a> 

span> | 二 /spana href 一 "# "二 Web 开发 一 /a> 二 span>| 一 /span> 
二 a href 一 "# "二 数据 库 管理 一 /a> 一 span>| 一 /span 二 
二 a href 一 "# ">>* nux 人 门 管理 一 /a 之 一 span>| 一 /span 二 热门 搜索 : 
<a href="#">C#</a><span>|</span> 
<a href="#">ASP.NET</a><span>|</span> 
a href="#">SQL Server</a><span>|</span> 
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过 a href=="#" 宝 PHP<=/a 之 过 span 之 | 过 /span 这 其 他 分 类 : 
<a href="#">C#</a><span>|</span> 
<a href="#">ASP.NET</a><span>|</span> 
<a href="#">SQL Server</a> </div> 
<div class="clear"></div> 
</div> 
<div class= "seacher_bottom"> 
所 div class= "bottomform"> 
=form name= "seacherform" method= "post" action=""> 
=select name= "booktype" clas: selectstyle"> 
二 option value 二 "1" 之 叮当 图 书 二 /option> 
二 option value 二 "2" 这 叮当 分 类 二 /option 二 
</select> 
<input type= "text" name= "keywords" class 一 "txtinputsytle" 
value 二 "请 输入 要 查询 的 关键 词 " /二 
一 a href 二 " 间 " class 一 "btninputstyle" 过 搜 &nbsp; 索 一 /a> 
<div class= "clear"></div> 
</form> 
</div> 
<div class= "bottomimglink"> 
过 a href 一 "# "之 高 级 <br /二 搜索 </a 二 


</div> 
<div class= "bottomlinkwords"> 
二 span 二 热门 搜索 : 


二/span<a href="#" 热 搜 1 一 /a> 
过 a href 一 "# "过 热 搜 2 二 /a 二 
过 a href 二 "#" 二 热 搜 3 二 /a 二 二 a href="#" 二 热 搜 4 二 /a 二 
二 a href 王 "# "二 热 搜 5 二 /a 二 二 a href="#" 二 热 搜 6 二 /a 二 
二 a href 一 "# "二 热 搜 7 二 /a 二 

</div> 

<div class="clear"></div> 

</div> 
</div> 


本 任务 完成 后 ,整个 search 区 的 CSS 样式 代码 如 下 : 


.search{ 
margin:0 0 5px 0; 
padding:0; 

} 

.seacher_top{ 
margin:0; 
padding:0; 

} 

.yuanjiao_left{ 
float:left; 

} 

.yuanjiao_right{ 
float: right; 

} 
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.yuanjiao_center{ 
float: left; 

} 

.bottomform{ 
float: left; 

} 

.bottomimglink{ 
float: left; 

} 

.bottomlinkwords{ 
float: left; 

} 


此 时 ,整个 search 区 的 效果 如 图 10-5 所 示 。 


resrPEP 其 他 分 类 : CeASP NET SOL Server 


图 书 分 类 : 程 座 设 计 |Web 开 发 填报 库 管理 asx 入 门 管理 执 门 搜索 : Cg 


[LED 


10-5 首页 search 区 的 初步 效果 


10.3.1 首页 search 区 圆 角 背景 样式 


通过 对 “叮当 网 上 书店 ”首页 最 终 效果 和 任务 3 中 设计 的 圆 角 背景 图 片 来 分 析 可 以 发 
现 , 左 侧 圆 角 背 景 图 片 和 右 侧 圆 角 背 景 图 片 的 宽 高 分 别 是 4px 和 27px, 中 间 背 景 图 片 的 
宽 高 分 别 是 1px 和 27px。 由 此 可 以 得 出 ,整个 . search_top 区 域 和 . yuanjiao__left、 


.yuanjiao_right 和 . yuanjiao_center 的 高 度 都 是 27px。 按 照 三 宫 格 技术 设计 原理 ,利用 
任务 9 中 背景 图 片 的 设置 样式 ,就 可 以 实现 本 模块 的 圆 角 背景 效果 。 
CSS 代码 如 下 : 
/* 修改 以 下 样式 * / 
.seacher_top{ 
margin:0; 
padding:0; 
height:27px; /* 将 高 度 设置 为 27px */ 
} 
.yuanjiao_left{ 
float: left; 
height:27px; 人 * 将 高 度 设置 为 27px * 人 
Width: Apx; /* 将 宽度 设置 为 4pr */ 
Background-image:url(../images/head_yj_left.jpg); / * 设置 背景 图 片 */ 
background-repeat :no-repeat; /* 设置 背景 图 片 是 否 重复 */ 
background-position:left tops /* 设 置 背 景 图 片 的 位 置 */ 
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.yuanjiao_right{ 
float:right; 
height:27pxr; /< 将 高 度 设 置 为 27Pr * 
Width: Aprs /人 * 根 据 右 侧 背景 图 的 宽度 设置 为 4pxr */ 
Background-image:url(../images/head yj_right. jp8)s; 
background-repeat :no-repeat; 
background-position :left tops 
} 
.yuanjiao_center{ 
float: left; 
height:27px;s  /* 将 高 度 设 置 为 27px * 人 
Wid1h:974px; /x* .container 的 宽度 982px, 分 别 减 去 左 , 右 各 4px, 得 出 宽度 为 974 像素 
此 宽度 必须 设置 。 若 不 设置 , 中 间 背 景 图 会 出 现 截断 空白 , 这 是 因为 
DIVY 浮动 后 DIV 宽度 跟 内 容 齐 宽 引 起 的 */ 
background-image:url(../images/head yj_center. jp8); 
bachground-repeat:repeat-x; / * 设置 背景 图 片 在 和 办 上 平 铺 */ 
background-position: left top; 
} 


通过 以 上 的 样式 设置 后 , 圆 角 背 景 图 片 效果 基本 实现 ,如 图 10-6 所 示 。 
| 


韶 网 各 生 | 都 助 中 心 | 天星 户 | 新 用 户主 册 | 区 录 


请 给 入 要 查询 的 关键 词 TREE EYES 


10-6 ”search 区 圆 角 背景 图 片 完成 后 的 效果 


接 下 来 的 任务 就 是 利用 文本 及 段落 和 超 链接 及 伪 类 样式 ,对 圆 角 背景 模块 中 的 内 容 
进行 样式 定义 ,实现 最 终 效 果 。 首 先 使 整体 内 容 水 平 离 左 侧 20px', 垂 直方 向 居中 ; 然后 定义 
超 链 接 字体 颜色 白色 ,鼠标 指针 移 上 去 时 加 下 划 线 ,并 设 管 左 侧 5px 和 右 侧 10px 的 间距 。 

CSS 代码 如 下 : 


/* 修改 yuanjiao_center, 实现 离 左 侧 20px, 垂 直方 向 居中 * / 
.yuanjiao_center{ 
float: left; 
height:27px; 
Uine-height:27pr;s / * 通过 设置 /ine-height 和 height 的 值 来 实现 文本 垂直 方向 居中 * 人 
adding-lef1:20px; / * 通过 设置 padding-left 的 值 来 实现 离 左 侧 的 间距 */ 
Hit1pz9441t7 /=* 根据 盒 子 模型 , 要 使 整个 盒子 的 宽度 不 变 必须 将 盒子 的 width 购 应 的 减 
去 20px, 因此 修改 widjhr 的 值 为 954 像素 */ 
background-image:url(. ./images/head_yj_center. jpg); 
background-repeat: repeat-x; 
background-position: left top; 
} 
/添加 .yuanjiao_center a 和 .yuanjiao_center a:hover 的 超 链接 样式 及 伪 类 样式 */ 
.yuanjiao_center af 
padding:0 10px 0 5px; 
margin:0; 
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color: # FFFFFF; 
text-decoration: none; 
} 
.yuanjiao_center a:hover{ 
text-decoration: underline; 
} 
/* 添加 .yuanjiao_center span 样式 ,实现 超 链接 之 间 垂直 分 隔 线 的 效果 x / 
.yuanjiao_center span{ 
color: # efefef; 
margin-right: 5px; 


} 


设置 文本 段落 及 超 链接 的 相关 样式 后 ,目前 search 区 的 效果 如 图 10-7 所 示 。 


亲 当 网 else le YW gk | Ba | | 
Ldinggdone com | 


10-7 ”search 区 设置 文本 段落 及 超 链 接 样式 后 的 效果 


10.3.2 首页 search 区 表单 设计 样式 


根据 “叮当 网 上 书店 ?首页 最 终 效 果 的 要 求 ,对 search 区 还 要 设置 下 面部 分 的 背景 色 
和 边框 、 表 单 区 域 样式 ,高 级 搜索 效果 和 右 侧 热门 搜索 效果 。 


1. 整个 search 区 下 面部 分 的 背景 图 片 和 边框 (边框 色 为 #dddddd) 
CSS 代码 如 下 : 


/添加 . seacher_bottom 样式 x*/ 
.searchbottom{ 
border: 1px # dddddd solid; 
background-color: # ffffff; 
background-image:url(. ./images/searchbottombg. png) ; 
background-position :left top; 
background-repeat: repeat-x; 
margin:0; 
padding:0; 
height:40px; /* 背景 图 片 的 高 度 为 40px, 因 此, 高度 就 是 40px */ 
line-height:40px; /* 设置 垂直 居中 * / 
} 


添加 以 上 样式 后 ,效果 如 图 10-8 所 示 。 
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任务 10 “叮当 网 上 书店 ”首页 search 区 样式 


程序 设计 | Neb 开发 | 数据库 阁 理 | *nax 入 门 学 习 | 人 | ASE_JET | SQL Server | PIE | Cs | AsF. NET | SQL Server 
叮当 分 类 国 搜索 高 纪 搜 索 热 门 搜索 : 势 搜 ! 热 搜 2 执 搜 3 热 搜 4 势 搜 5 执 扫 8 执 搜 1 


10-8 设置 . seacher_bottom 样式 后 的 效果 


2. 表单 区 域 样式 


表单 区 域 有 两 层 嵌 套 , 一 层 是 定义 样式 . bottomform 的 DIV 层 , 另 一 层 则 是 榜 套 在 
DIV 层 中 的 Form 层 。 按 照 * 叮 当 网 上 书店 "最终 效果 图 的 设计 ,该 区 域 的 宽度 为 510px， 
右 侧 与 高 级 搜索 区 域 之 间 的 边框 色 为 #ele4e6 ,表单 各 元 素 垂 直方 向 居中 ,水 平方 向 距离 


左 侧 30px。 

CSS 代码 如 下 : 

/修改 .bottomform 样式 * / 

.bottomform{ 
float: left; 
height: 48px; /设置 高 度 跟 父 divr 层 同 高 
Width: S10px; /设置 宽度 为 510px 
margin:0; 人 设置 外 边 距 为 Opxr 
padding:0; 人 /设置 内 填充 间距 为 像素 


border-right:1px #ele4de6 solid; ” // 设 置 右 侧 与 高 级 搜索 区 域 之 间 的 边框 效果 
} 
/* 添加 .bottomform form 样式 ,对 表单 元 素 进行 设置 */ 
.bottomform form{ 
margin:0; /* 如 图 10-8 所 示 , 背景 图 片 与 边框 之 间 有 空白 ,这 个 空白 就 是 因为 form 标签 在 
IE 6 下 和 其 他 浏览 器 下 的 表现 不 同 引 起 的 。 要 解决 这 个 问题 ,就 要 先 将 form 
标签 的 margin 和 padding 设置 为 0, 去 除 默认 的 内 外 边 距 , 实 现在 各 种 浏览 器 
下 的 显示 统一 */ 
padding:14px 0 0 30px; 
/* 通过 设置 padding 的 上 填充 间距 , 达到 表单 各 元 素 在 垂直 方向 的 居中 , 因为 表单 元 素 并 非 文 
本 ,因此 不 能 设置 line-height 与 height 为 相同 值 * / 
width:100% ; 
overflow :hidden; 
/* 该 样式 的 主要 作用 是 让 超出 表单 区 域 的 内 容 自 动 隐藏 ,从 而 使 表单 不 会 因为 其 中 内 容 的 宽 、 高 
太 大 而 使 表单 盒子 的 形状 发 生 形变 。 在 以 后 的 实施 中 , 如 果 要 使 父 盒子 不 被 子 盒子 或 者 内 容 
撑 开 而 发 生 形变 , 即 可 使 用 该 样式 。 本 样式 的 缺点 是 一 旦 子 盒子 或 者 内 容 太 大 超出 了 父 盒子 
的 区 域 ,那么 超出 部 分 会 被 自动 隐藏 。* / 
} 


表单 设置 完成 后 , 接 下 来 要 做 的 就 是 设置 边框 样式 .背景 图 片 及 颜色 样式 、 文 本 及 段 

落 样 式 等 ,完成 “叮当 网 上 书店 ”最 终 设计 稿 对 表单 的 设计 要 求 (单行 文本 框 中 文本 颜色 为 
划 b6b7b9,“ 搜 索 ” 文 本 颜色 为 #853200)。 
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CSS 代码 如 下 : 


/* 添加 以 下 样式 ,分 别 设置 下 拉 莱 单 框 ,单行 文本 框 和 超 链接 按钮 的 样式 * / 


.selectstyle{ 


} 


float: left; 

width:100px; /* 设 置 下 拉 菜 单 框 的 宽度 为 100px*/ 

height:21px; 

line-height:21px; /* 设 置 下 拉 菜单 框 文本 内 容 垂直 居中 * / 

margin-right: 10px; /x 设 置 下 拉 菜 单 框 右 侧 离 单行 文本 框 的 间距 为 10pxx / 


.txtinputsytle{ 


float: left; 
border:1px # 333 solid; /* 设 置 单行 文本 框 的 边框 效果 x*/ 
background-color: #fff; /x 设置 单行 文本 框 的 背景 颜色 为 白色 */ 
height:17px; 
/* 设 置 单行 文本 框 的 高 度 为 17px, 该 值 的 设置 依据 为 右 侧 按 钮 背景 图 片 的 高 度 * / 


line-height:17px; /x 设置 单行 文本 框 文本 内 容 垂直 居中 */ 
padding-left: 5px; /* 设 置 单行 文本 框 文本 内 容 离 左 侧 内 间距 为 5px*/ 
width:245pxi /* 设置 单行 文本 框 的 宽度 为 245pxx / 
color: # b6b7b9; /* 设 置 单行 文本 框 文本 内 容 的 字体 颜色 * / 
.btninputstyle{ 
float: left; 
display: block; /=* 设 置 超 链 接 以 块 级 元 素 显 示 * / 
height:21px; /设置 按钮 的 高 度 为 21px, 该 值 设 置 依据 为 按钮 背景 图 片 的 高 度 * / 
line-height:21px; /* 设 置 按钮 文本 “搜索 ”垂直 方向 居中 */ 
width:109px; /* 设 置 按钮 的 宽度 为 109px, 该 值 设 置 依据 为 按钮 背景 图 片 的 宽度 * / 
border: none; /* 设 置 按钮 无 边框 */ 


} 


margin:0 0 0 —1px; /* 设置 按钮 离 左 侧 单 行文 本 框 的 间距 为 向 一 lpx, 这 样 做 是 因为 设 
计 效 果 图 中 用 按钮 遮盖 单行 文本 框 右 侧 的 1px 边框 * / 


padding:0; 

color: # 853200; /* 设 置 按钮 的 文本 字体 颜色 * / 
font-size:14px; /* 设 置 按钮 的 文本 字体 大 小 为 14px* / 
text-decoration: none; /* 去 除 超 链接 按钮 文本 默认 的 下 划 线 效果 x*/ 
font-weight: bold; /* 设 置 按 钮 的 文本 字体 加 粗 * / 


background-image:url(. ./images/bg_searchbutton_default. gif) ; 

/* 设 置 超 链接 按钮 在 正常 状态 下 的 背景 图 片 * / 
background-position:left top; / * 设置 背景 图 片 的 位 置 * / 
background-repeat:no-repeat; / * 设置 背景 图 片 固定 , 即 不 在 任何 方向 重复 * / 


text-align: center; /* 设 置 按钮 的 文本 水 平 居中 效果 * / 
.btninputstyle:hover{ 
cursor: hand; /* 设置 超 链接 按钮 在 鼠标 指针 移 上 去 时 鼠标 指针 变 成 
手 状 * / 
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background-image:url(. . /images/bg_searchbutton_mo. gif) ; 

/= 设置 超 链 接 按钮 在 鼠标 指针 移 上 去 时 的 背景 图 片 * / 
background-position :left top; 
background-repeat:no-repeat; 


任务 10 “叮当 网 上 书店 ”首页 search 区 样式 


对 表单 和 表单 各 元 素 的 样式 进行 设置 后 ,search 区 下 部 分 . bottomform 模块 的 效果 
如 图 10-9 所 示 ,基本 实现 了 最 终 效果 。 


程序 论 | Tab 开发 | 歼 笑 床 芭 理 | owe 入门 学 汪 | Ce | Kr WET | RL Server | De | Ce | KT NET | SL save 


回 当 分 类 ~ 搜索 部 生 扫 过 热门 灾 索 : 热 搜 ! 热 挡 2 热 挡 3 热 搜 4 执 搜 5 执 挡 s 热 控 


图 10-9 .bottomform 模块 的 最 终 效果 


3. 高 级 搜索 效果 


根据 “叮当 网 上 书店 ”设计 稿 的 要 求 ,高 级 搜索 区 的 背景 图 片 宽 、 高 为 33px X29px， 
“高 级 搜索 ”文字 分 两 行 显示 ,中 间 采 用 二 br /二 标签 换行 ; 高 级 搜索 按钮 左右 两 侧 的 间 
距 为 10px。 由 于 高 级 搜索 按钮 区 的 DIV 层 内 放置 的 是 超 链接 ,所 以 不 能 采用 设置 line- 
height 跟 height 同 值 来 实现 按钮 的 垂直 居中 ,而 要 采用 padding-top 来 实现 。 

CSS 代码 如 下 : 


/* 修改 bottomimglink 样式 ,实现 左 、 右 间距 和 按钮 的 垂直 居中 * / 
.bottomimglink{ 
float: left; 
margin:0 10pxs 人 * 实现 按钮 的 左右 间距 */ 
padding: O07 
} 
/* 添加 样式 ,实现 高 级 搜索 按钮 的 超 链接 效果 */ 


.bottomimglink af 


display:block; /* 将 行内 元 素 转换 为 块 级 元 素 显 示 * / 
width:33px; /* 按 照 设计 素材 尺寸 ,设置 宽度 为 33pxx / 
height:29px; /* 按 照 设 计 素材 尺寸 ,设置 高 度 为 29pxx / 
line-height:14px; /* 设 置 文本 的 行 高 为 14px。 由 于 文本 通过 
去 br /二 换行 , 故 不 能 设置 跟 height 同 值 来 实现 文本 的 垂直 居中 * / 
padding-top:4px; /* 设 置 文本 在 垂直 方向 的 居中 ,该 值 可 以 适当 微调 * / 
text-align: center; /* 设 置 文本 在 水 平方 向 居中 */ 
text-decoration: none; /* 去 除 超 链接 文本 的 下 划 线 * / 
color: #333333; /* 设 置 超 链接 文本 的 颜色 * / 
background-image:url(. . /images/bg_adsearch_default. gif) ; 

/* 设 置 超 链接 的 背景 图 片 * / 


background-position:left top; /* 设置 超 链接 背景 图 片 的 位 置 * / 
background-repeat:no-repeat; / * 设置 超 链接 背景 图 片 不 重复 * / 

} 

.bottomimglink a:hover{ 
background-image:url(. ./images/bg_adsearch_mo. gif); 

/* 设 置 超 链接 鼠标 指针 移 上 去 时 的 背景 图 片 */ 

background-position:left top; / * 设置 超 链接 鼠标 指针 移 上 去 时 的 背景 图 片 的 位 置 * / 
background-repeat:no-repeat; /* 设置 超 链接 鼠标 指针 移 上 去 时 的 背景 图 片 不 重复 * / 
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设置 高 级 搜索 区 域 样式 后 ,效果 如 图 10-10 所 示 。 


程序 襄 计 | Tab 开 其 | 数 需 诺 若 理 | ya 入 门 学 习 | Ce | MT WET | SL Sever ie | Ge | A NET | SL Save 


回 当 分 类 > 


图 10-10 高 级 搜索 区 的 效果 


4. 右 侧 热门 搜索 效果 


本 区 域 的 XHTML 结构 比较 简单 ,其 中 只 有 文本 和 超 链接 。 只 要 通过 这 两 种 样式 的 
设计 ,就 能 很 简单 的 实现 相应 的 效果 。 
CSS 代码 如 下 : 


/* 添 加 以 下 样式 ,实现 超 链接 相关 效果 * / 
.searchnavlink span{ 


font-weight: bold; /* 文 本 加 粗 */ 
} 
.searchnavlink af 
color: # 333; / * 设置 超 链 接 文本 颜色 * / 
text-decoration: none; /* 去 掉 超 链接 下 划 线 * / 
margin:0 2px; /* 设 置 超 链接 与 左 , 右 两 侧 的 间距 为 2pxx / 


} 


.searchnavlink a:hover{ 
text-decoration: underline; /* 设 置 超 链 接 鼠 标 指针 移 上 去 时 的 文本 下 划 线 */ 
} 


通过 以 上 4 个 步骤 的 实施 ,首页 search 区 的 最 终 效果 基本 实现 ,如 图 10-2 所 示 。 


104 任务 拓展 


本 任务 重点 介绍 了 圆 角 背景 效果 和 表单 相关 样式 设置 的 知识 和 技能 ,读者 可 掌握 背 
景 图 片 及 颜色 ,文本 及 段落 和 超 链 接 及 伪 类 等 样式 的 应 用 。 请 读者 独立 完成 以 下 相关 效 
果 , 以 熟练 掌握 本 任务 的 相关 知识 和 技能 。 


10.4.1 首页 main_left、main_right 两 侧 样 式 


首页 main_left 和 main_right 区 “图 书 ”“ 品 牌 出 版 社 ”“ 用 户 登 录 ” 和 “点 击 排 行 榜 
Top10”4 个 模块 的 圆 角 背景 效果 如 图 10-11 所 示 。 


10.4.2 首页 main_right 用 户 登录 区 样式 


首页 main_right 区 用 户 登 录 模 块 的 表单 效果 如 图 10-12 所 示 。 
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任务 10 “叮当 网 上 书店 ”首页 search 区 样式 


你 还 不 是 叮当 网 用 户 了 
创 附 一 个 新 用 户 >> 


图 10-11 两 侧 样式 的 圆 角 背景 效果 图 10-12 用 户 登录 区 效果 


10.4.3 用户 注册 页 样式 


注册 页 用 户 注册 模块 的 表单 效果 如 图 10-13 所 示 。 


以 下 均 为 必 二 项 

请 与 和 09 Enail 地 址 + 
设 罗 在] 
设 和 宙 友 : 

再 类 负 入 你 设置 二 而 : 


图 10-13 用 户 注册 模块 的 表单 样式 效果 


10.4.4 用 户 登 录 页 样式 


登录 页 用 户 登 录 模 块 的 页 面 样式 效果 如 图 10-14 所 示 。 


叮当 网 ， 全 球 领先 的 中 文 网 上 书店 


更 多 选择 
0 万 种 书 音像 ， 并 有 家 居 百 供 、 化 要 品 、 至 码 等 几 十 个 类 别 共计 百 万 种 病 品 ，2000 个 | 用 户 登 录 
入 驻 精 品 店 中 店 I 
更 钙 价 格 SD: 
电视 购物 的 3 5 折 ， 传 统 书店 的 5 一 " 折 ， 其 他 网 站 的 ?一 9 折 查寻 
更 方 使、 更 安全 
全 国 租 这 3o0 个 城市 送 兴 上门， 货 到 付款 。 姑 标 一 点 ， 零 风险 阳 物 ， 便 掩 到 家 , 

全 还 不 是 叮当 网 用 户 ? 

一人 新闻 这 


10-14 用户 登录 页 样式 效果 


105 任务 小 结 


通过 本 任务 的 学 习 和 实现 ,Bill 已 经 了 解 和 掌握 了 网 站 的 圆 角 背 景 图 片 及 表单 等 重 
要 组 成 部 分 的 样式 控制 。 其 中 , 圆 角 背景 的 实现 方法 有 很 多 种 ,这 还 需要 在 以 后 的 实践 过 
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程 中 ,不 断 去 学 习 和 探索 ; 表单 的 相关 样式 要 尽量 符合 UI 设计 的 美学 效果 , 尽 可 能 地 提 
升 网 站 用 户 的 体验 ,重点 是 label 标签 的 使 用 和 表单 元 素 的 数量 及 位 置 的 设计 。 在 以 后 的 
学 习 和 工作 中 , 尽 可 能 参考 国内 外 一 些 著名 的 网 站 设计 ,学 习 和 借鉴 别人 的 经 验 。 


106 能 力 评估 


.九宫 格 技术 的 原理 是 什么 ? 

圆 角 背 景 的 实现 方法 有 哪些 ? 各 自 的 优 缺点 是 什么 ? 
. 表单 UI 设 计 的 相关 原则 有 哪些 ? 

.表单 元 素 的 一 般 控制 样式 有 哪些 ? 

. label 标签 的 作用 是 什么 ? for 属性 有 何 作 用 ? 


中 
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任务 11 ' 钉 当 网 上 书店 ”首页 
main_center 区 样式 


至 此 ,Bill 已 经 基本 掌握 了 CSS 部 分 的 大 部 分 知识 和 技能 ,对 CSS 样式 中 的 布局 与 
定位 、 盒 子 模 型 ,列表 元 素 .背景 图 片 和 颜色 .文本 及 段落 . 超 链接 及 伪 类 表单 的 样式 等 有 
了 一 定理 解 和 掌握 。 接 下 来 ,还 要 对 以 上 CSS 的 样式 和 技能 进一步 练习 ,从 而 能 够 对 所 
学 的 CSS 技能 融会 贯通 ,举一反三 ,熟练 掌握 DIV 和 CSS 的 网 页 设计 技巧 和 制作 技能 。 
Bill 将 通过 本 任务 再 带领 大 家 一 起 继续 实现 首页 main_center 区 的 样式 效果 ,学 习 CSS 
样式 中 的 一 些 更 加 高 级 的 应 用 和 技巧 。 

人 学习 目标 

(1) 理解 掌握 使 用 CSS 缩写 。 

(2) 理解 掌握 CSS Hack 技术 。 

(3) 理解 掌握 ul 的 不 同 表现 和 容器 不 扩展 等 常见 兼容 性 问题 。 

(4) 理解 掌握 3 一 5 种 主流 浏览 器 兼容 性 等 问题 。 


111 任务 描述 


首页 main_center 区 的 主要 功能 是 对 “叮当 网 上 书店 "电子 商务 平台 所 销售 的 图 书 商 
品 进行 快速 展示 和 陈列 。 本 区 域 主要 分 为 上 、 中 、 下 3 个 部 分 ,分 别 是 主编 推荐 .本 月 新 出 
版 和 本 周 媒体 热点 3 个 模块 。 为 了 能 够 快速 展示 main 区 的 原始 效果 , 先 对 本 月 新 出 版 模 
块 的 图 书 图 片 的 排列 效果 和 大 小 作 样 式 调 整 。 先 期 加 入 的 CSS 样式 如 下 : 


/#* 添加 .centerulli ul li 和 .centerulli ul li a img 样式 * / 
.centerulli ul li { 

float: left; /* 让 整个 区域 左 浮动 */ 
1 


.centerulli ul li a img{ 


width: 88px; /* 设 置 图 书 封面 图 片 的 宽度 为 88px*/ 
height:117px; /* 设 置 图 书 封面 图 片 的 高 度 为 117pxx / 


} 


通过 以 上 的 调整 后 ,main 区 的 原始 效果 如 图 11-1 所 示 。 
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。 主 六 推荐 全 的 于 书 、 景 低 的 价格 尽 在 叮当 辣 
， 主人 > 
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ASP NET 20 在 10 盯 的 基础 上 做 了 根 多 友 进 。 用 它 可 以 更 容易 地 折 建 下 区 3 
本 ， 以 中 断 进 的 方式 和 助 计 者 迅 这 宇 拓 使 用 ASP NET 2 开发 网 站 所 项 的 基本 知 i 
分 介绍 了 ASP NET 20 及 其 六 重型，9isaal Web. 


术 世 通过 凋 昌 的 语言 和 洋 引 的 上 
全 刷 共 分 5 个 部 分 ， 共 24 间 。 冀 名 


图 11-1 main 区 的 原始 效果 


任务 11 “叮当 网 上 书店 ”首页 main_center aa 


在 本 任务 中 ,会 使 用 CSS 的 一 些 高 级 应 用 和 技巧 ,并 解决 CSS 在 不 同 浏览 器 中 兼容 
性 与 解析 问题 ,让 读者 能 够 更 加 深入 地 学 习 CSS, 从 而 适应 企业 岗位 开发 的 技能 需求 。 本 
任务 要 完成 的 最 终 效 果 如 图 11-2 所 示 。 
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媒体 评论 : 

ASP. WET 2.0 在 1. 0 版 的 基础 上 做 了 很 多 改进 ， 用 它 可 以 更 容易 地 创建 数据 驱动 的 网 
站 。 本 书 通 过 简明 的 语言 和 详细 的 步骤 ， 以 循序 渐进 的 方式 帮助 读者 迅速 学 握 使 用 ASP .NET 
2.0 开 发 网 站 所 需 的 基本 知识 。 

全 书 共 分 5 个 部 分 ， 共 24 章 。 第 一 部 分 介绍 了 ASP. NET 2, 0 及 其 编程 模型 ，Visusl 


Web. 


图 11-2 main 区 最 终 效果 
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112 相关 知识 


本 任务 中 所 用 到 的 CSS 样式 效果 ,基本 都 是 前 面 几 个 任务 已 经 讲授 过 的 和 使 用 过 
的 ,在 此 ,就 不 再 进行 累 述 。 为 了 能 够 让 广大 读者 对 CSS 样式 有 一 个 更 加 深入 的 学 习 和 
了 解 ,因此 ,在 该 任务 中 ,编者 加 入 了 一 些 CSS 的 高 级 应 用 和 技巧 ,加 入 了 各 种 浏览 器 对 
CSS 的 兼容 与 解析 差异 等 问题 的 知识 。 


11.2.1 CSS 缩写 


CSS 缩写 是 指 将 多 个 CSS 属性 集合 到 一 行 中 的 编写 ,这 种 方式 能 够 缩减 大 量 的 代 
码 ,使 代码 编写 效率 提高 。 在 前 面 的 任务 中 ,已 经 对 CSS 的 大 部 分 样式 进行 了 介绍 ,代码 
的 编写 都 是 按照 标准 的 一 行 一 个 样式 进行 的 。 下 面 探讨 CSS 缩写 的 用 法 。 


1. 字体 缩写 
字体 缩写 是 针对 字体 样式 进行 的 缩写 形式 ,包含 字体 .字号 等 属性 ,语法 格式 如 下 : 


font:font-style | font-variant | font-weight | font-size | line-height | font-family 


对 于 字体 缩写 ,只 要 使 用 font 作为 属性 名 称 , 后 接 各 个 属性 的 值 即 可 ,各 个 属性 值 之 
间 使 用 空格 分 开 。 例 如 网 站 body 样式 的 定义 ,原先 关于 字体 的 写法 如 下 : 


body{ 
font-family:"", Arial; / * body 样式 中 关于 字体 的 定义 * / 
font-size: 12px; / * body 样式 中 关于 字体 大 小 的 定义 */ 
color: #000; 
margin:0; 
padding:0; 
background-color: # fff; 

} 


现在 ,如 果 采 用 字体 缩写 ,就 可 以 如 下 进行 定义 : 


body{ 
font:12px "",Arial; /=< 字 体 的 定义 由 原来 的 两 行 变 成 一 行 */ 
color: 井 000; 
margin:0; 
padding:0; 
background-color: # fff; 
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通过 以 上 的 对 比 不 难 发 现 ,如 果 字 体 的 定义 越 多 ,那么 节省 的 代码 行 也 就 越 多 。 字 体 缩 
写 一 行 代码 可 以 完成 6 个 属性 的 设置 ,节省 了 编码 时 间 。 对 于 其 他 属性 的 缩写 ,也 是 如 此 。 


2. 边 距 缩写 
外 边 距 margin 与 内 边 距 padding 是 两 个 常用 的 属性 ,传统 写法 使 用 以 下 形式 : 


margin-top: 120px; /* 上 外 边 距 */ 
padding-bottom: 10px; /* 下 内 边 距 */ 
maring-left: 80px; /* 左 外 边 距 */ 
padding-right: 5px; /* 右 内 边 距 */ 
margin-right :20px; /* 右 外 边 距 */ 
padding-left: 10px; /* 左 内 边 距 */ 
margin-bottom :40px; /x* 下 外 边 距 */ 
padding-top: 8px; /x* 上 内 边 距 */ 


而 在 CSS 缩写 中 ,可 以 使 用 以 下 编写 方式 : 


margin: margin-top | margin-right | margin-bottom | margin-left 
padding: padding-top | padding-right | padding-bottom | padding-top 


默认 情况 下 ,margin 和 padding 的 缩写 需要 提供 4 个 参数 , 按 顺序 分 别 是 上 \ 右 、 下 、 
左 , 是 一 个 顺 时 针 的 顺序 。 也 可 以 使 用 1、2、3 参数 来 进行 编写 。 如 上 面 提 到 的 body 样式 
中 的 margin 和 padding 就 是 采用 缩写 的 1 个 参数 来 实现 的 。 


3. 边框 缩写 

border 对 象 本 身 是 一 个 复杂 的 对 象 , 它 包括 4 条 边 的 不 同 宽度 .颜色 以 及 样式 ,所 以 
border 对 象 提供 的 缩写 形式 相对 来 说 也 更 加 丰富 。 不 仅 可 以 对 整个 对 象 进行 缩写 ,也 可 
以 对 单个 边 进行 缩写 。 而 对 于 整个 对 象 而 言 ,语法 格式 如 下 : 


border: border-width | border-style | color 


这 样 缩写 以 后 ,当前 对 象 的 4 条 边框 都 会 采用 同样 的 效果 。 如 果 要 对 任意 一 条 边框 
单独 进行 样式 设置 ,就 可 以 使 用 border 的 单条 边框 的 缩写 ,语法 格式 如 下 : 


border-top: border-width | border-style | color 
border-right: border-width | border-style | color 
border-bottom: border-width | border-style | color 
border-left: border-width | border-style | color 


除了 对 边框 整体 及 4 个 边 进行 单独 做 缩写 外 ,border 还 提供 了 border-style、border- 
width 以 及 border-color 的 缩写 ,语法 格式 如 下 : 


border-width:top | right | bottom | left 
border-color: top | right | bottom | left 
border-style: top | right | bottom | left 
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具体 的 参数 个 数 及 顺序 ,与 margin 和 padding 的 缩写 相同 。 
4. 背景 缩写 
背景 缩写 用 于 对 象 的 背景 相关 属性 缩写 ,语法 格式 如 下 : 


background:background-color | background-image | background-repeat | background-attachment | 
background-position 


再 来 回顾 一 下 任务 9 中 导航 菜单 的 背景 控制 CSS 代码 ,代码 如 下 : 


.aleft{ 
background-image:url(. ./images/headnav_left. png) ; 
background-position :left top; 
background-repeat:no-repeat; 


} 


缩写 后 的 代码 如 下 : 


.aleft{ 


background:url(../images/headnav_left. png) no-repeat left top; 
} 


11.2.2 CSS Hack 技术 


CSS Hack 是 一 种 改善 CSS 在 不 同 浏览 器 下 的 表现 形式 的 技巧 与 方法 。 

CSS Hack 技术 是 指 通过 一 些 浏览 器 特殊 支持 或 者 不 支持 的 语句 ,使 一 个 CSS 样式 
能 够 被 浏览 器 解析 或 者 不 解析 的 一 种 技术 。 

常用 的 CSS Hack 使 用 方法 有 如 下 几 种 。 


1. @import 
格式 了 
@import: url("newstyle.css"); 


通过 以 上 导入 语句 , 带 引号 的 URL 地 址 只 能 被 IE 5 及 以 上 浏览 器 及 Firefox 所 识 
别 ,而 IE4 及 以 下 版 本 的 浏览 器 就 不 会 解析 newstyle. css。 因 此 ,@import 的 这 种 用 法 
主要 用 于 区 别 IE 4。 


2. 注释 


在 CSS 中 可 以 使 用 /*...* /来 标记 一 段 注释 内 容 。 由 于 版 本 升级 的 原因 ,在 对 注释 
的 解析 上 ,IE 浏览 器 也 有 所 区 别 ,因此 可 以 利用 注释 语句 来 进行 CSS Hack。 例 如 : 
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# container { font-size:15px; } 
# container / *#x /{ font-size:30px; } 


对 以 上 代码 ,CSS 的 执行 顺序 是 ,后 一 个 定义 总 是 会 覆盖 前 一 个 。 当 IE 6 与 Firefox 
执行 到 这 里 时 ,将 使 用 后 一 个 ( 即 font-size: 30px; ) 样 式 代 码 进行 最 终 处 理 ,而 下 5 由 于 
对 /x* ... x /注释 代码 并 不 解析 ,因此 它 认为 只 有 第 一 个 代码 可 用 ,所 以 最 终 样式 将 使 用 
font-size:15px 进行 显示 。 注 释 的 这 种 用 法 主要 用 于 区 别 IE 5。 

注意 : 选择 符 与 / x... * /之 间 不 允许 有 空格 存在 。 如 果 有 空格 存在 ,那么 该 CSS 
Hack 不 会 产生 任何 作用 。 

3. 属性 选择 符 


CSS 2 中 提供 了 一 种 属性 选择 符 , 用 于 对 具有 特定 属性 的 对 象 进行 选择 。 这 是 CSS 
中 一 个 非常 优秀 的 选择 符 方法 ,但 是 IE 浏览 器 没有 对 这 种 方法 提供 支持 。 属 性 选择 器 在 
Firefox 中 工作 正常 ,而 对 IE 系列 浏览 器 却 没有 任何 作用 。 可 以 利用 此 方法 对 正 浏览 器 
与 Firefox 浏览 器 进行 区 别处 理 。 例 如 : 


span . container { color:blue; } 
span[class= container]{ color:red; } 


在 IE 浏览 器 中 ,class 将 content 的 span 对 象 的 字体 颜色 显示 为 蓝 色 ,而 同一 对 象 在 
Firefox 之 中 则 会 使 用 第 二 段 样式 代码 , 即 字体 颜色 显示 为 红色 。 


4. 子 对 象 选择 符 


子 对 象 选择 符 类 似 于 包含 选择 符 ,也 是 CSS 提供 的 一 种 选择 形式 。 它 主要 也 是 用 来 
区 别 IE 系列 浏览 器 及 Firefox 浏览 器 ,用 法 与 属性 选择 符 相 同 。 例 如 : 


span . container { color:blue; } 
span>. container { color:red; } 


在 下 浏览 器 中 ,span 下 class 名 为 content 的 文本 会 呈现 蓝 色 ,而 同样 的 对 象 在 
Firefox 下 的 文本 会 呈现 红色 。 


5. 十 Hack 


十 Hack 方法 非常 简单 也 易于 管理 “十 ”号 用 于 区 分 IE 系列 浏览 器 与 其 他 浏览 器 。 
代码 如 下 : 


# container { 
width:400px; 
十 width:380px; /x*IE 可 执行 x/ 
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在 相同 的 属性 设置 下 , 带 有 十 号 的 属性 只 能 在 IE 5 及 以 上 版 本 下 运行 ,这 样 就 可 以 
通过 这 种 方式 去 区 分 对 待 IE 系列 浏览 器 与 其 他 浏览 器 。 


6. _Hack 及 IE 7 的 Hack 方式 


使 用 十 Hack 可 以 区 别 正 与 其 他 浏览 器 ,但 部 分 兼容 性 效果 是 特别 针对 下 7 设置 的 。 
到 目前 为 止 , 正 7 还 不 支持 下 划 线 的 属性 写法 ,因此 可 以 结合 上 面 的 使 用 方法 ,增加 对 IE 7 
的 Hack 设置 。 代 码 如 下 : 


# container{ 


width:400px; 
十 width:380px; /x*IE7 可 执行 */ 
_width:200px; /x*IE 6 可 执行 */ 


} 


提示 : 只 被 IE 6 浏览 器 解析 的 _Hack 样式 ,在 实现 main 区 左 侧 和 右 侧 的 效果 时 会 
使 用 到 。 即 在 设置 左 侧 或 右 侧 上 、 下 两 个 模块 的 margin 边 距 时 ,在 IE 6 下 会 在 下 面 模块 
的 圆 角 背景 部 分 跟 下 面 边框 部 分 产生 空隙, 解决 方案 就 是 采用 CSS Hack 技术 的 加 " ?的 
样式 来 解决 。 


11.2.3 ul 的 不 同 表 现 


列表 也 是 在 下 与 Firefox 中 容易 发 生 问题 的 对 象 ,主要 原因 源 自 Firefox 对 ul 对 
象 的 默认 值 设 置 。 看 如 下 代码 。 


<div id="layout"> 
<u> 
过 li> 首 页 </l 谊 
过 li> 我 的 叮当 </li> 
过 li 过 图书 分 类 </li> 
</u> 
</div> 


下 面 是 CSS 代码 : 


#1layout{ 

border: 1px solid #333; 
} 
ul{ 

list-style: none; 


| 


目前 代码 非常 简单 ,显示 效果 没有 任何 问题 ,但 是 当 在 ul 样式 中 加 入 margin-left: 
0px 时 ,问题 就 出 现 了 。 在 下 下 ,ul 里 面 的 内 容 靠 左 对 齐 ; 而 在 Firefox 下 ,没有 任何 反 
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应 。 如 果 在 ul 样式 中 只 加 入 padding-left:0px 时 ,在 Firefox 下 ,ul 里 面 的 内 容 就 靠 左 对 
齐 ; 而 IE 下 ,没有 任何 反应 。 因 此 ,针对 以 上 的 问题 ,可 以 为 ul 设置 margin:0px 和 
padding:0px 两 行 代码 , 先 统一 ul 的 边 距 。 


11.2.4 容器 不 扩展 问题 


容器 不 扩展 问题 是 指 当 一 个 父 盒子 中 的 所 有 子 盒子 都 设置 了 CSS 浮动 样式 ,脱离 了 
整个 文档 流 后 , 父 盒 子 由 于 没有 了 子 盒子 的 内 容 而 高 度 变 为 0px 的 问题 。 

解决 方法 是 : 在 父 盒子 的 里 面 加 上 一 个 子 盒子 ,并 将 这 个 子 盒子 的 CSS 样式 设置 为 
clear:both( 即 清除 所 有 浮动 效果 ) 。 
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整个 main_center 区 的 设计 分 3 个 部 分 ,分 别 是 主编 推荐 区 、 本 月 新 出 版 区 和 本 周 媒 
体 热点 区 。 本 任务 主要 具体 实施 主编 推荐 区 和 本 月 新 出 版 区 。 本 周 媒体 热点 区 由 于 基本 
效果 跟 主 编 推荐 区 的 效果 大 致 相同 ,因此 ,由 读者 在 本 任务 实施 的 基础 上 自行 独立 完 
以 检验 下 读者 的 掌握 情况 。 下 面 先 来 看 一 下 整个 main 区 中 主编 推荐 区 的 XHTML 结构 
代码 。 


/* 主编 推荐 区 * / 
div class= "center_top"> 
<div class= "centertopclass"> 
<ul> 
< 一 li class 二 "centertopullione" 志 主编 推荐 &nbsp; 最 全 的 图 书 、 最 低 的 价格 尽 在 叮当 
网 </li> 
< 一 li class 一 "centertopullitwo" 之 一 a href 一 "# "二 详情 &gti&gt; 二 /a>> 一 /li 
</u> 
<div class= "clear"></div> 
</div> 
<div> 
<a href="#"><img src="images/BookCovers/978711515888_new. jpg" 
height="180" width="132" alt="" class= "centerbookimg" /></a> 
二 h5 二 <<a href 一 "# "class 一 "booktitle" 之 Effective C# 中文 改 善 版 </a 之 一 /h5 之 
过 p class 一 "bookcontents" 二 本 书 围绕 一 些 关于 C# 和. NET 的 重要 主题 ,包括 C# 语 言 
元 素 、. NET 资源 管理 使 用 C# 表 达 设 计 、 创 建 二 进 制 组 件 和 使 用 框架 等 ,讲述 了 最 常 
见 的 50 个 问题 的 解决 方案 ,为 程序 员 提供 了 改善 C# 和 .NET 程序 的 方法 。 本 书 通过 
将 每 个 条 款 构建 在 之 前 的 条 款 之 上 ,并 合理 地 利用 之 前 的 条 款 , 来 让 读者 最 大 限度 地 
学 习 书 中 的 内 容 , 为 其 在 不 同情 况 下 使 用 最 佳 构造 提供 指导 。 本 书 适合 各 层次 的 C# 
程序 员 阅 读 ,同时 可 以 推荐 给 高 校 教师 (尤其 是 软件 学 院 教 授 C#/.NET 课程 的 老 
师 ) ,作为 C# 双语 教学 的 参考 书 .二 /Pp 二 
二 p 之 过 span class 一 "spanone" 过 定价 : 鞋 49 元 二 /span 二 
二 span class 一 "spantwo" 二 折扣 价 : 圣 38 元 二 /span 二 
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二 span class 一 "spanthree" 过 折扣: 75 折 一 /span 二 一 /p 二 
</div> 
<div class="clear"></div> 
</div> 


接着 再 来 看 下 整个 main_center 区 中 本 月 新 出 版 区 的 XHTML 结构 代码 。 


/x 本 月 新 出 版 区 x*/ 
一 div class= "center_middle"> 
所 div class= "centertopclass"> 


<u> 
<li class 一 "centertopullione" 之 本 月 新 出 版 最 新 最 热 全 收录 ,全 场 打折 ,天 天 特价 
</l> 
<li class= "centertopullitwo"><a href="#"> 更 多 &gt; &gt;</a></l> 
</u> 
</div> 
<div class= "centerulli"> 
<u> 
<li> 
<a href="#"><img src="images/BookCovers/1.jpg" alt="" /></a> 
<h5><a href="#" class= "centerullititle" >Effective ASP. NET 中 文 版 二 /a> 
</hs> 
<p class 一 "centerulliprice" 之 一 span class= "delprice"> ¥49.0</span> 
<span> ¥28.0</span></p> 
</li> 
<li> 
<a href="#"><img src="images/BookCovers/2.jpg" alt="" /></a> 
< 到 h5 之 <a href 一 "# "class 一 "centerullititle" 之 C# 中 文 版 </a><</h5 之 
<p class= "centerulliprice" ><span class="delprice"> ¥39.0</span> 
<span> ¥27.0</span></p> 
</l> 
<l> 
<a href="#"><img src 一 "images/BookCovers/3.jpg" alt="" /></a> 
=h5 二 a href 一 "# "class 一 "centerullititle" 之 Effective ASP. NET 中 文 版 二 /a 二 
</hs> 
<p class 一 "centerulliprice" 之 一 span class= "delprice"> ¥49.0</span> 
<span> ¥28.0</span></p> 
去 /二 
<l> 
<a href="#"><img src 一 "images/BookCovers/4.jpg" alt="" /></a> 
< 到 hb5 之 一 a href 一 "# "class 一 "centerullititle" 之 C# 中 文 版 之 /a 二 过/h5 二 
=p class 王 "centerulliprice" 之 一 span class= "delprice">¥39.0</span> 
<span> ¥27.0</span></p> 
</l> 
< 一 li 


<a href="#"><img src= "images/BookCovers/5.jpg" alt="" /></a> 


=h5><a href="#" class="centerullititle">>Effective ASP. NET 中 文 版 /a 


</hs> 
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=p class 一 "centerulliprice" 之 一 span class= "delprice" > ¥49.0</span> 
=<span> ¥28.0</span></p> 

</l> 

<li> 
<a href="#"><img src="images/BookCovers/6.jpg" alt="" /></a> 
二 h5 之 一 a href 一 " 井 "class 一 "centerullititle" 之 C 井 中 文 版 天 /a></h5 盖 
<p class= "centerulliprice"><span class= "delprice"> ¥39.0</span> 
<span>¥27.0</span></p> 

</l> 

<li> 
<a href="#"><img src="images/BookCovers/7.jpg" alt="" /></a> 
=<h5><a href 一 "# "class 一 "centerullititle" 之 Effective ASP. NET 中 文 版 二 /a 

</hs> 

=p class= "centerulliprice" ><span class= "delprice"> ¥49.0</span> 
=span> ¥28.0</span></p> 

</l> 

< 
<a href="#"><img src 一 "images/BookCovers/8.jpg" alt="" /></a> 
二 h5 二 一 a href 一 " 井 ”class 一 "centerullititle" 之 C 井 中 文 版 一 /a> 二 /h5 二 
<p class 一 "centerulliprice" 之 一 span class= "delprice"> ¥39.0</span> 
<span> ¥27.0</span></p> 

</li> 

</ul> 
<div class= "clear"></div> 
</div> 
</div> 


本 任务 完成 后 ,整个 main_center 区 的 CSS 样式 代码 如 下 : 


/* 其 中 ,main 区 左 侧 图 书 分 类 、 品 牌 出 版 社 、 用 户 登录 、 点 击 Top10 的 CSS 样式 由 读者 自行 完成 
实现 ,这 里 不 再 进行 叙述 */ 
.main_center{ 
float: left; 
width:642px; 
margin:0 10px; 


11.3.1 首页 main_center 区 主编 推荐 区 样式 


本 模块 按照 手绘 设计 稿 和 XHTML 结构 来 分 析 , 可 以 分 成 上 、 下 两 个 部 分 。 上 面部 
分 是 模块 的 标题 行 ,下 面部 分 是 主编 推荐 的 图 书展 示 区 。 其 中 ,图 书 封面 和 图 书信 息 是 一 
个 图 文 混 排 的 效果 。 
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1. 主编 推荐 区 上 面部 分 
CSS 代码 如 下 : 


/* 新 增 以 下 样式 */ 
.center_top{ 
padding-bottom:20px; ”/* 设 置 主编 推荐 区 与 下 面 本 月 新 出 版 区 的 盒子 间距 为 20pxx / 
} 
.Centertopclass{ 
margin:0; /* 使 用 CSS 样式 缩写 效果 * / 
padding:0; 
} 
.centertopclass ul{ 
margin:0; 
padding:0; /* 通过 设置 margin 和 padding 为 0px, 解 决 ul 的 表现 不 同 问题 * / 
list-style-type: none; 
} 
.centertopclass ul li{ 
float: left; 
} 
.centertopullione{ 
width:480px; 
height: 30px; 
background: # ff url(. ./images/index_arrow. gif) no-repeat left top; / * 背景 CSS 缩写 */ 
padding:0 0 0 20px; 
color: # c49238; 
font-weight: bold; 
letter-spacing :0. lem; 
} 
.centertopullitwo{ 
width:142px; 
text-align: right; 
} 
.centertopullitwo af 
color: #000; 


text-decoration: none; 


通过 以 上 的 样式 设置 后 ,main_center 区 主编 推荐 、 本 月 新 出 版 和 本 周 媒 体 热 点 3 个 
区 域 的 上 面部 分 都 实现 了 最 终 效果 ,效果 如 图 11-3 所 示 。 


2. 主编 推荐 区 下 面部 分 


在 本 部 分 的 实现 过 程 中 ,首先 要 解决 图 文 混 排 的 问题 。 在 实际 的 开发 中 ,可 以 使 用 浮 
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了 主编 推荐 最 全 的 图 书 、 最 邦 的 价格 尽 在 叮当 网 详情 >>| 


年 三 息 ， 
Effective C# 中 文 改善 版 


本 书 围 线 一 些 关于 Cj 和 .NET 的 重要 主题 ， 包 括 C 闪 在 言 元 素 、.NET 资 源 管理 、 使 用 C# 夫 达 设 计 、 创 建 二 进 制 组 件 和 使 用 杠 
架 等 ， 讲 述 了 最 常见 的 50 个 问题 的 解决 方案 ， 为 程序 员 提供 了 改善 C# 和 .NET 程 序 的 方法 。 本 书 通过 将 每 个 条 款 构 建 在 之 
前 的 条 款 之 上 ， 并 合理 地 利用 之 前 的 条 车， 来 让 读者 最 大 限度 地 学 习 书 中 的 内 容 ， 为 其 在 不 同情 况 下 使 用 最 住 构造 提供 搓 
导 。 ” 本 书 适合 和 | A 同时 可 以 推荐 给 高 校 教师 〈 尤 其 是 软件 学 院 教授 Cfl NET 课 程 的 老师 》 ， 作 为 


定价 : 半 49 元 折扣 价 : 兰 38 元 折扣 : 75 折 


了 本 月 最 新 出 版 最 新 最 热 全 收录 ， 全 场 打折 ， 天 天 特价 更 多 >>| 


11-3 首页 main 区 3 个 模块 上 面部 分 的 效果 


动 样式 ,设置 图 片 左 浮动 ,脱离 文档 流 , 让 文本 开始 从 图 片 的 右 侧 进行 排列 显示 。 
CSS 代码 如 下 : 


/* 新 增 以 下 代码 ,实现 主编 推荐 区 下 面部 分 效果 * / 


.centerbookimg{ 
float:left; /* 设 置 图 片 左 浮动 ,实现 图 文 混 排 效果 * / 
margin:10px 10px 10px 0; /x* 使 用 缩写 ,设置 图 片 外 边 距 上 、 右 、 下 都 是 10px*/ 
border: none; /* 去 除 图 片 超 链接 的 外 边框 * / 
} 
.booktitle{ /* 设 置 图 书 标题 文本 效果 * / 


font-size:14px; 
font-weight: normal; 
color: #06329b; 

} 

. bookcontents{ /* 设 置 图 书简 介 文 本 效果 * / 
text-indent:20px; /* 设 置 文本 段落 为 首 行 缩 进 效 果 */ 
line-height :24px; 

} 

.spanone, . spantwo, . spanthree{ 
margin-right:20px; 

} 

.spanone{ 
text-decoration:line-through; ”/* 设 置 定价 删除 线 效 果 */ 

b 


通过 以 上 两 步 的 设置 ,主编 推荐 区 下 面部 分 的 效果 已 经 实现 ,如 图 11-4 所 示 。 
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W 主编 推荐 最 全 的 图 书 、 最 歼 的 价格 尽 在 叮当 网 详情 >> 
Effective C# 中 文 改善 版 

本 书 国 绕 一 些 关于 C# 和 .NET 的 重要 主题 ， 包 括 C 胡 百 言 元 素 、NET 资 源 管理 、 使 用 C# 表 
达 设 计 、 创 建 二 进 制 组 件 和 使 用 框架 等 ， 讲 述 了 最 常见 的 50 个 问题 的 解决 方案 ， 为 程序 员 提 
供 了 改善 C# 和 NET 程序 的 方法 。 本 书 通过 将 每 个 条 款 构 建 在 之 前 的 条 款 之 上 ， 并 合理 地 利用 
之 前 的 条 款 ， 来 计 读者 最 大 限度 地 学 习 书 中 的 内 容 ， 为 其 在 不 同情 况 下 使 用 最 佳 构造 提供 指 
导 。 本 书 适 合 各 层次 的 Cf 程 序 员 阅 读 ， 同 时 可 以 推荐 给 高 校 教师 《尤其 是 软件 学 院 教授 
CHNET 课 程 的 老师 )， 作 为 C 构 语 教 学 的 参考 书 - 


定价 二 49 元 折扣 价 : ¥38 元 折扣: 75 折 


图 11-4 首页 main 区 主编 推荐 区 下 面部 分 的 效果 


11.3.2 首页 main_center 区 本 月 新 出 版 区 样式 


通过 对 “叮当 网 上 书店 ”首页 最 终 效果 和 XHTML 结构 进行 分 析 可 以 发 现 ,这 个 模块 
是 由 8 个 下 标签 组 成 的 一 组 图 书 图 片 的 自 适 应 展示 。 本 月 新 出 版 区 的 总 宽度 是 642px， 
根据 盒子 模型 的 计算 公式 ,每 组 显示 4 本 图 书 , 共 2 组 ,那么 每 个 li 盒子 的 宽度 最 大 值 


为 160px。 

CSS 代码 如 下 ; 

/* 新 增 以 下 样式 ,实现 本 月 新 出 版 区 的 效果 * / 

.centerulli{ 
margin:0; 
padding:0; 
text-align: left; /* 设 置 DIV 盒子 中 内 容 左 对 齐 */ 

} 

.centerulli ul{ 
margin:0; /< 设置 margin 为 0, 解 决 ul 表现 不 同 的 问题 */ 
padding:0; /* 设 置 padding 为 0, 解决 ul 表现 不 同 的 问题 * / 
list-style-type: none; /* 去 除 ul 的 项 目 符号 * / 

} 

.centerulli ul li{ 
float: left; /* 设 置 1i 左 浮动 ,实现 自 适应 效果 * / 
width:160px; /* 根 据 盒 子 模 型 的 计算 ,每 个 1 盒子 的 宽度 为 110px* / 


padding-bottom:20px; 
overflow:hidden; /* 设 置 超出 1 盒子 宽度 的 内 容 为 隐藏 ,这 样 可 以 解决 1 盒子 中 因为 内 容 
长 度 太 长 使 1 盒子 的 宽度 被 撑 开 的 问题 。 这 个 样式 可 以 用 于 所 有 固 
定 宽 度 的 盒子 不 被 盒子 里 面 内 容 的 宽度 撑 开 的 情况 * / 
} 
.centerulli ul li af 
display: block; /将 行内 元 素 a 盒子 转换 成 块 级 元 素 * / 
width:160px; 
text-align: center; 
} 
.centerulli ul li a img{ 
width:88px; 
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height:117px; 

border: none; /* 去 除 超 链接 图 片 的 外 边框 * / 
} 
.centerullititle{ 

display:block; 

width:100px; 

margin:0 auto; 


/* 跟 width:100px 搭配 使 用 ,设置 margin 水 平方 向 auto, 就 是 固定 宽度 且 居 中 板式 x*/ 


padding:0; 

color: #06329b; 
font-size: 12px; 
height:20px; 
line-height :20px; 
font-weight: normal; 

} 

.centerulliprice{ 
width:100px; 
margin:0 auto; 
padding:0; 


定 宽度 且 居 中 板式 */ 


} 
.centerulliprice span{ 
float: left; 
width:50px; 
text-align: center; 
} 
.delprice{ 
text-decoration: line-through; 


此 时 首页 main_center 区 本 月 新 出 版 区 的 效果 已 经 实现 ,如 图 11-5 所 示 。 


本 月 最 新 出 版 最 新 最 热 全 收录 ， 全 场 打折 ， 天 天 特价 
— 
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pc 标准 程序 库 
项 目 化 教程 
Visual C12005 ~ 
编程 技巧 大 全 Cc 
2 
va Crd 
Effective ASP.NET 中 文 版 C# 中 文 | Effectve ASPNET 中 文 版 C# 中 文 版 
¥490 ¥280 ¥398 ¥270 ¥400 ¥280 298 ¥270 


图 11-5 首页 main 区 本 月 新 出 版 区 的 效果 
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至 此 ,Bil 已 经 完成 了 本 任务 中 最 重要 最 复杂 的 两 个 子 任务 ,首页 main_center 区 的 
效果 基本 实现 ,也 让 广大 读者 对 CSS 的 高 级 使 用 技巧 和 CSS Hack 等 有 了 一 定理 解 和 掌 
握 , 对 各 种 浏览 器 的 常见 解析 和 兼容 性 问题 也 有 了 意识 上 和 技能 上 的 提高 。 希 望 广大 读 
者 在 后 续 的 学 习 和 任务 完成 中 能 够 熟练 使 用 。 


114 任务 拓展 


本 任务 重点 完成 了 首页 main_center 区 主编 推荐 区 和 本 月 新 出 版 区 的 两 个 部 分 的 效 
果 , 也 通过 CSS 高 级 使 用 技巧 和 CSS Hack 技术 ,解决 了 常用 浏览 器 对 CSS 的 兼容 性 问 
题 。 让 读者 在 CSS 样式 编码 的 能 力 更 上 了 一 个 层次 。 


11.4.1 首页 main_center 区 媒体 热点 区 样式 


通过 对 main_center 区 本 周 媒 体 热点 区 效果 与 主编 推荐 区 的 效果 进行 对 比 可 以 清晰 
地 发 现 , 这 两 个 模块 的 效果 基本 相同 ,主要 是 实现 图 文 混 排 效果 。 因 此 ,本 周 媒 体 热 点 区 
的 效果 由 读者 自己 在 理解 主编 推荐 区 效果 实现 的 基础 上 ,独立 自行 完成 ,效果 如 图 11-6 
所 示 。 


更 本 周 巡 体 热点 最 热 图 书 ， 全 场 打 折 、 天 天 特价: 详情 六 


Effective C# 中 文 版 改 矢 c# 程 序 的 50 种 方法 
作者 : 〈 美 ) 米 切 尔 

关 出 版 社 : 人 民 邮电 出 版 社 

出 版 日 期 : 2007-5-1 


定价 +Y49 。 折扣 价 : 闻 38 。 折扣 : 75 折 


媒体 评论 : 

ASP WNET 2.0 在 1.0 版 的 基础 上 做 了 很 多 改进 ， 用 它 可 以 更 容易 地 创建 数据 驱动 的 网 
站 。 本 书 通过 简明 的 语言 和 详细 的 步 邓 ， 以 循序 渐进 的 方式 帮助 读者 迅速 等 握 使 用 ASP. NET 
2.0 开 发 网 站 所 需 的 基本 知识 。 

全 书 共 分 5 个 部 分 ， 共 24 章 。 第 一 部 分 介绍 了 ASP. ET 2.0 及 其 编程 模型 ，Visual 
ab .. 


图 11-6 首页 main 区 本 周 媒 体 热点 区 效果 


11.4.2 首页 footer 区 样式 


到 此 , 除 footer 底部 以 外 ,“ 叮 当 网 上 书店 ”首页 的 效果 基本 实现 。 由 于 footer 底部 的 
所 有 知识 和 技能 ( 即 图 片 样式 、 文 本 样式 和 超 链接 样式 ) 跟 前 面 的 任务 相同 ,因此 ,也 需要 
读者 根据 掌握 的 知识 和 技能 完成 footer 底部 的 效果 ,如 图 11-7 所 示 。 
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任务 11 “叮当 网 上 书店 ”首页 main_center 区 样式 


素 
“ 正品 将 保证 服务 一 站 式 


Copyright © WTF 2004-2008，N Bights Beserved. Perered Dy Greatsoft com 全 PriEotllma 


享受 网 购 乐 趣 , 安 在 


图 11-7 首页 footer 区 效果 


115 任务 小 结 


通过 本 任务 的 学 习 和 实践 , Bill 掌握 了 CSS 缩写 .CSS 高 级 应 用 技巧 .CSS Hack 技 
术 和 浏览 器 解析 和 兼容 性 问题 的 解决 方法 。 其 中 ,CSS 缩写 和 CSS 高 级 应 用 技巧 是 本 任 
务 的 重点 ,要求 熟 练 掌握 ,这 样 在 以 后 的 CSS 编码 中 ,可 是 使 代码 更 加 简洁 ; CSS Hack 
技术 和 浏览 器 解析 及 兼容 性 问题 是 本 任务 的 难点 ,需要 通过 项 目 实践 多 练 . 多 做 、 多 积累 
经 验 ,这 样 才能 真正 掌握 该 方面 的 技能 ,为 适应 以 后 社会 岗位 的 需求 ,不 断 提高 个 人 网 站 
设计 与 制作 的 能 力 ,为 培养 具有 IT 特色 的 “现代 性 班组 长 ”人 才 培 养 目标 打下 坚实 的 
基础 。 


116 人 能力 评估 


.常用 的 CSS 缩写 有 哪些 ? 其 语法 是 什么 ? 

. 什么 是 CSS Hack 技术 ? 

. 常用 的 CSS Hack 技术 有 哪些 ? 分 别针 对 哪些 版 本 的 浏览 器 ? 
.如 何 实 现 图 文 混 排 效果 ? 

.如 何 隐藏 超出 盒子 大 小 的 内 容 ? 


cn 请 性 
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任务 人 “ 杀 当 网 上 书店 ”购物 车 页 样式 


从 任务 1 实施 到 任务 11,Bill 已 经 基本 已 经 将 “叮当 网 上 书店 ”的 首页 效果 和 其 他 页 
面 的 基本 结构 完成 ,也 掌握 了 Web 前 端 技术 的 基本 理论 知识 和 技能 。 本 任务 主要 解决 
的 是 如 何 通过 表格 将 软件 研发 中 的 大 数据 量 进行 布局 和 展示 的 问题 ,并 培养 读者 在 进 
行 页 面 布局 时 区 分 何 种 情况 下 采用 div 标签 , 何 种 情况 下 采用 table 标签 的 能 力 。 通 过 
对 table 标 签 的 学 习 和 使 用 ,使 已 经 逐渐 淡出 网 页 布局 的 table 标签 与 主流 的 div 标签 相 
辅 相 成 ,各 取 所 长 。 

人 学习 目标 

(1) 掌握 常用 的 表格 样式 控制 方法 。 

(2) 掌握 细 线 表格 的 设置 方法 。 

(3) 掌握 表格 的 各 行 变 色 方 法 。 


121 任务 描述 


购物 车 就 像 去 超市 购物 时 ,超市 提供 给 顾客 的 手推车 或 者 提篮 ,主要 的 功能 是 方便 顾 
客 在 选 购 商品 时 ,将 自己 准备 购买 的 商品 临时 放 在 手推车 或 者 提篮 中 ,方便 顾客 可 以 不 断 
持续 地 进行 购物 ,在 选 购 结束 前 ,顾客 可 以 对 购物 车 或 者 提篮 中 选 定 商品 做 出 买 与 不 买 的 
决定 。 

本 任务 的 购物 车 页 ,实现 对 用 户 在 网 上 购物 时 选 定 商品 的 临时 存储 功能 。 在 结算 时 ， 
可 以 对 购物 车 中 的 选 定 商品 进行 修改 等 操作 。 因 此 ,本 页 面 是 一 个 大 数据 量 的 布局 和 展 
示 页 面 ,如 果 采 用 主流 的 div 标签 进行 布局 ,由 于 展示 的 数据 量 较 大 ,数据 的 结构 比较 复 
杂 , 所 以 比较 困难 。 而 传统 的 table 标签 能 够 很 好 地 解决 这 个 问题 。 因 此 在 本 任务 中 采 
用 table 标签 来 进行 布局 设计 。 

table 标签 能 够 很 好 地 解决 软件 研发 中 大 数据 量 的 布局 和 展示 功能 ,但 是 其 本 身 的 样 
式 效果 一 般 , 而 且 在 CSS 中 没有 专门 的 样式 来 为 table 标签 服务 ,因此 表格 的 效果 一 般 采 
用 margin、padding、border 和 background 等 样式 来 进行 设计 。 

本 任务 的 原始 效果 如 图 12-1 所 示 。 


任务 12 “叮当 网 上 书店 ”购物 车 页 样式 


我 的 购物 车 您 选 好 的 商品 : 
商品 号 商品 名 价格 数量 操作 


商品 全 额 总 计 : 时 126. 可 效 共 节省 : 48.60 [| 
Bool9134 五 月 俏 家 由 滞 [e1650 ¥1300 79 折 出 除 | 修改 


口 五代 拓 麻 歌 子 水 昌之 恋 ( 透明 红 ) 138.00 ¥93.0067 折 |1 | 修改 | 
鬼 敬 市 壬 爱 24¥204075 折 | 其 除 | 修改 


口 万代 打 卫 台子 水 晶 之 恋 ( 透明 红 》¥ 13800 #930067 折 |1 于 | 位 改 
口 20019134 五 月 俏 家 物语 1650 蛙 1300 79 折 |1 | 修改 


五 代 拓 麻 歌 子 水 星之 恋 (透明 红 》¥ 13800 930067 折 |1 开除 | 修改 
3 六 24¥20 和 75 折 中 开除 | 修改 
口 五代 拓 麻 歌 子 水 晶 之 恋 ( 适 明 红 ) 133 00 #930067 折 |1 除 | 修改 


魅惑 帝王 爱 [24 于 204035 折 |1 开除 | 佬 改 


五 代 拓 麻 歌 子 水 晶 之 恋 ( 透明 红 》¥ 138.00 ¥9300 67 折 |1 出 除 1 修改 


鬼 惑 市 壬 受 24¥204075 折 |1 册 除 | 修改 


第 一 页 123. 4050 最 后 一 页 喘 竺 到 | | 页 Go 


可 


口 
口 


图 12-1 购物 车 页 原始 效果 
购物 车 页 的 最 终 效果 如 图 12-2 所 示 。 


归 我 的 购物 车 “您 和 好 的 商品 : 


商品 全 烽 总 计 : 于 125 40 您 共 节省 : 站 46.60 EE 
加 20019134 五 月 俏 守 物语 YH6-58 Y13 00 79 折 1 出 除 | 俱 改 
日 5 ee Ym 6 新 EI 
回 多 可 帝王 爱 Ye4 ¥20 40 75 折 区 出 除 | 俱 改 
日 人 下 于 水 昌之 术 ( 话 明 代 ) 6 EI 
回 20019134 五 月 信守 物流 YH46-59 13 00 79 折 1 这 | 修改 
日 5 人 扣子 水 之 (前 红 ) 0- Y 加 四 6 新 Ea 
回 鬼 避 帝王 受 Ye4 y20 40 75 折 1 好 除 | 修改 
日 万 代 扬 有 歌 子 水 昌之 访 ( 遂 明 红 ) a0-99- 9 0 1 折 器 | 仁政 
回 鬼 避 帝王 受 Yee y20 4 75 折 和 出 除 | 修改 
品 5 YY 晰 Ei 
回 披 杰 帝王 爱 Ye4 ¥20.40 75 折 和 出 除 | 修改 

3 a [1| Go 
| 


12-2 购物 车 页 的 最 终 效果 


122 相关 知识 


本 任务 主要 是 在 表格 的 设计 中 加 入 细 线 表格 和 隔行 变色 等 外 观 效果 ,以 提升 用 户 
体验 。 
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12.2.1 细 线 表格 


在 Web 2.0 的 时 代 到 来 后 ,表格 在 网 页 设计 布局 中 的 比重 大 大 降低 了 。 但 是 表格 
作为 一 种 非常 特殊 而 且 实用 的 数据 表达 方式 , 却 从 来 没有 跳出 设计 师 们 的 视野 。 毕 竟 
很 多 数据 都 需要 通过 表格 形式 来 表现 ,如 本 项 目 中 的 购物 车 页 .用 户 注册 页 和 用 户 登 
录 页 等 。 

本 任务 主要 分 析 表 格 的 展示 效果 及 实现 细 线 表格 的 效果 。 表 格 的 默认 效果 可 以 通过 
Dreamweaver 的 设计 视图 看 出 来 。 正 常情 况 下 ,Dreamweaver 表格 的 每 一 条 边框 都 有 两 
条 虚线 边框 ,但 在 浏览 器 中 表格 的 边框 线 比 较 粗大 ,不 符合 平时 项 目 制作 中 边框 线 为 1px 
的 效果 。 

那么 为 什么 表格 在 默认 情况 下 是 这 样 的 效果 呢 ? 原因 主要 在 于 使 用 表格 进行 布局 设 
计时 ,插入 的 新 表格 有 两 个 默认 的 属性 值 , 分 别 是 cellspacing( 单 元 格 间距 ) 和 cellpadding 
(单元 格 填充 ) ,这 两 个 属性 值 在 默认 情况 下 都 是 2px。 因 此 就 出 现 了 在 Dreamweaver 中 
一 条 边 两 个 边框 线 的 效果 。 要 解决 它 , 只 要 在 插入 表格 时 ,分 别 将 以 上 两 个 值 都 设置 为 
0px 即 可 。 

但 是 将 以 上 两 个 属性 设置 为 0px 后 ,虽然 在 Dreamweaver 中 是 单 边 框 表格 线 了 ,但 
是 在 浏览 器 中 显示 时 还 是 感觉 边框 线 比 较 粗大 ,仍然 不 符合 1px 细 线 表格 的 要 求 。 即 使 
将 表格 的 table、tr、td 等 盒子 都 加 上 border 样式 ,设置 边框 线 为 1px, 效 果 仍 然 没 有 变化 。 
回想 表格 的 组 成 结构 就 不 难 发 现 ,其 实 组 成 表格 的 table、tr、td 都 符合 盒子 模型 ,每 个 盒 
子 都 有 自己 的 border, 当 边框 发 生 重生 时 ,是 分 别 用 各 自 的 边框 还 是 将 边框 线条 合并 使 用 
呢 ? 解决 了 这 个 问题 , 细 线 表格 效果 就 实现 了 。 在 Web 2.0 下 ,采用 如 表 12-1 所 示 的 
CSS 样式 来 实现 细 线 表格 。 

表 12-1 边框 的 border-collapse 样式 


属 性 描述 可 用 什 
ee 将 边框 线条 进行 合并 a 
"59 Pe | 将 边框 线条 独立 存在 (与 collapse 相反 效果 ) Pe 


通过 对 标签 设置 border-collapse:collapse 后 , 即 可 实现 细 线 表格 效果 。 


12.2.2 表格 隔行 变色 


当 表格 的 行 和 列 都 很 多 ,并 且 数 据 量 很 大 的 时 候 ,为 避免 单元 格 采用 相同 的 背景 色 会 
使 浏览 者 感到 凌乱 ,发 生 看 错 行 的 情况 ,可 以 将 奇数 行 和 偶数 行 的 背景 颜色 设置 得 不 一 样 
来 解决 问题 。 实 现 表 格 隔行 变色 效果 很 简单 ,只 要 给 偶数 行 tr 标签 设置 不 同 于 奇数 行 tr 
标签 的 背景 颜色 即 可 。 采 用 的 CSS 样式 就 是 background-color。 
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123 任务 实施 


购物 车 页 的 main 区 也 是 上 下 结构 ,下 面 模块 是 上 .中 .下 结构 的 圆 角 边框 效果 ,在 圆 
角 边 框 的 中 间 部 分 , 才 要 用 表格 TABLE 布局 。 因 此 ,在 了 解 了 购物 车 页 的 整个 文档 组 织 
结构 后 ,Bill 将 采用 细 线 表格 和 隔行 变色 来 实现 购物 车 页 的 最 终 效 果 。 购 物 车 页 main 区 
的 XHTML 结构 代码 如 下 : 


/购物 车 页 main 区 中 间 主 体 * / 
<divid="main"> 
div class 一 "shoppingtitle" 之 一 span class 一 "myshoppingcar" 过 我 的 购物 车 二 /span> 
二 span class 一 "myproducts" 过 您 选 好 的 商品 : 二 /span 之 一 /div> 
< 一 div class= "shoppingtabletop"> 
=table> 
=thead> 
<tr> 
< 一 th class= "firsttd" 之 商品 号 一 /th> 一 th class="secondtd" 过 商品 名 
</th> 
过 th class 二 "threetd" 二 价格 二 /th 二 二 th class 一 "fourtd" 之 数量 一 /th> 
二 th class="fivetd" 二 操作 二 /th> 
</tr> 
</thead> 
</table> 
</div> 
<div class= "shoppingtablecenter"> 
<table border="1" cellspacing= "0" cellpadding= "0" class= "mycartable"> 
<tbody> 
<tr> 
过 td colspan 二 "5" class 二 "firsttrtd" 志 商品 金额 总 计 : 
二 span class 二 "more" 记 鞋 126.40 二 /span> 您 共 节 省 : 圣 48.60 
<input name= "tj" type="submit" value="" class= "balancebtn"> 
</td> 
</tr> 
<tr> 
td class= "firsttd"> 
<input type= "checkbox" name= "choice" value=""/> 
</td> 
二 td class 一 "secondtd" 二 一 a href=="product. html" 之 20019134 五 月 俏 家 
物语 <</a>><</td> 
<td class= "threetd"> <font class= "line-middle”> ¥16.50</font> 
<font class 一 "more" 盖 靶 13.00 一 /font> 79 折 二 /td> 
=<td class= "fourtd"><input name 一 "shop1” type= "text" class=" 
inputl" value="1"></td> 
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td class= "fivetd" > 过 a href 一 "product. html" 过 删除 一 /a> | 
二 a href 王 "product.html" 之 修改 二 /a> 王 /td> 
ED 
tr class= "oushutrtd"> 
<td><input type= "checkbox" name= "choice" value=""/></td> 
去 td><a href 二 "product. html" 过 万 代 拓 麻 歌 子 水 晶 之 恋 (透明 红 ) 二 /a 二 /td 
<td><font class= "line-middle"> ¥138.00 </font> 
<font class= "more">¥93.00</font> 67 折 </td> 
<td><input name="shop2" type="text" class="inputl" value="1"></td> 
二 td 之 过 a href=="product. html" 二 删除 二 /a 二 | 
二 a href 二 "product. html" 志 修改 二 /a 二 过 /td 二 
</u> 


< 
人 * 以 下 隔行 的 HTML 代码 省 略 */ 
</r> 


</tbody> 
<tfoot> 
EH 
<td colspan= "5"> 
<div class="pages"> 
<a href 一 "# "class 一 "num" 之 第 一 页 </a> 
< 一 span class="num_now">1</span> 
<a href="#" class="num">2</a> 
<a href="#" class="num">3</a>... 
<a href="#" class="num">49</a> 
<a href="#" class="num">50</a> 
过 a href 一 "# " class 二 "num" 志 最 后 一 页 三 /a 二 跳 转 到 &nbsp; 
<input type= "text” class="tiaozhuan" value="1" /> 
&nbsp; 页 &nbsp; 过 a href 一 "# "class 一 "golink" 二 Go 一 /a> 
</div> 
</td> 
< /tr > 
</tfoot> 
</table> 
</div> 
<div class= "shoppingtablefooter"></div> 
<div class= "clear"></div> 
</div> 


按照 购物 车 页 main 区 自 上 至 下 的 实现 流程 , Bill 先 带 领 大 家 实现 Class 一 
"shoppingtitle" 部 分 的 样式 。 加 入 如 下 的 CSS 样式 代码 


/* 新 增 .shoppingtitle, .myshoppingcar, .myproducts 样式 */ 
. shoppingtitle{ 
width:982px; 
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height:30px; 
background: # {ff url(. ./images/bigshopping. png) no-repeat left top; 

} 

.myshoppingcar{ 
padding-left:28px; 
font:20px "微软 雅 黑 "; 
color: #008b68; 

} 

.myproducts{ 
margin-left:20px; 
font-size: 14px; 
font-weight: bold; 


设置 完成 之 后 的 效果 如 图 12-3 所 示 。 


只 我 的 购物 车 。 您 选 好 的 商品 。 


商品 号 商品 名 价格 数量 操作 
商品 多 向 总 计 : 持 126.40 纸 共 节省 : 49.60 
20019134 五 月 俏 家 物语 ¥1650¥130079 折 |1 删除 | 修改 
口 碟 代 拓 麻 歌 子 水 昌之 态 ( 透明 红 ) ¥138.00 ¥93.00 67 折 |1 于 除 | 修改 
峙 十 帝王 爱 ¥24¥204075 折 |1 删除 | 修改 
万 代 拓 麻 歌 子 水 晶 之 态 《 透明 红 ) ¥13800 ¥930067 折 |1 。 ”| 出 除 | 修改 
20019134 五 月 俏 家 物语 ¥1650 ¥¥130079 折 1 删除 | 修改 
契 代 拓 麻 歌 子 水 晶 之 恋 ( 透明 红 》¥13800 ¥930067 折 |1 出 除 | 修改 
购 瓯 帝王 爱 ¥¥24¥204075 折 |1 其 除 | 修改 
万 代 拓 麻 歌 子 水 晶 之 恋 ( 透明 红 ) 里 138.00 ¥9300 67 折 |1 册 除 | 修改 
由 惑 帝 壬 爱 24¥204075 折 |1 删除 | 修改 
丐 代 拓 麻 歌 子 水 晶 之 恋 ( 透明 红 )¥ 138.00 ¥93.00 67 折 |1 | 岗 除 | 修改 
购 囊 帝王 爱 ¥24¥204075 折 |1 删除 | 修改 
弟 一 页 1 如 .4950 最 后 一 页 巾 转 到 出 页 Go 


图 12-3 设置 完 . shoppingtitle 层 样式 后 的 效果 


接 下 来 实现 购物 车 页 中 的 圆 角 背景 效果 。 
CSS 样式 代码 如 下 : 


/* 新 增 以 下 样式 ,实现 圆 角 背景 的 效果 * / 
. shoppingtabletop{ 
width:962px; ”/* 子 盒子 的 宽度 计算 要 按照 盒子 模型 的 计算 公式 ,因为 下 面 padding 设置 了 
左 、 右 均 为 10px, 因 此 此 处 的 盒子 宽度 是 总 宽度 是 由 982px 减 去 20px 得 
到 的 */ 
height:26px; 
margin:0; 
padding:0 10px; 
background: # {ff url(. ./images/shoppingtopbg. png) no-repeat left top; 
/* 设 置 圆 角 背 景 图 片 */ 
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以 上 CSS 代码 实现 的 效果 如 图 12-4 所 示 。 


号 我 的 购物 车 。 你 先 好 的 商品 。 


图 12-4 购物 车 页 圆 角 背景 实现 后 的 效果 
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12.3.1 购物 车 页 表格 列表 效果 


本 任务 中 最 关键 的 .最 复杂 的 效果 就 在 表格 布局 设计 的 表格 效果 部 分 ,也 是 本 任务 的 
重点 和 难点 。 本 任务 分 成 4 个 步骤 来 实现 。 


1. 编写 表格 全 局 样式 代码 
CSS 代码 如 下 : 


/* 新 增 以 下 样式 * / 
.mycartable{ 
width:962px; 
height: auto; 
font:12px "宋体 ","Times New Roman", Times, serif; 
} 
/* 通过 中 间 用 逗号 隔 开 的 方式 来 进行 样式 的 集体 声明 * / 
.mycartable, . mycartable tr, .mycartable tr td{ 
border:1px #cece solid; 
margin:0; 
padding:0; 
border-collapse:collapse; ”/* 细 线 表格 */ 
font-size: 12px; 
text-align: center; 
} 
.mycartable tr{ 
height: 30px; 
} 


效果 如 图 12-5 所 示 。 


号 我 的 购物 车 。 您 选 好 的 商品 。 


商品 号 商品 名 价格 数量 操作 
商品 全 种 总 计 : 126_40 您 共 节省 : 48.60 站 | 

口 200t9134 五 月 人 家 6 50 ¥13.00 ?9 折 1 i | fs 
口 万 代 拓 麻 鸡 子 水 蝇 之 访 (《 适 明 红 ) 139.00 ¥93.00 67 折 1 Mb | 人 
口 驯 焉 帝王 爱 ¥24 ¥20 40 75 折 1 M$ | fe 
口 互 代 拓 麻 亚 子 水 晶 之 恋 【《 章 明 红 ) ¥138 00 ¥93.00 67 折 1 | 人 
日 20019134 五 月 信守 物 语 时 16.50 ¥13.00 79 折 1 扣除 | 佬 改 
日 有 态 (着 只 红 ) 389.00 9.00 6r 折 1 Mt | fe 
口 入 二 韦 王 营 24 ¥20 40 75 折 1 | fe 
日 了 台子 水 昌之 恋 《 直 明 红 ) 9.00 3.00 6 新 1 | 
口 笃 下 市 王 爱 24 里 20. 40 75 折 1 MW | fee 
口 扣子 水 昌之 恋 ( 衣 明江 ) a 00 93.00 61 拆 1 Ml | fx 
口 台 这 于 受 和 24 20 40 15 折 1 Ml | fe 


是 一 页 123 geo 最 后 一 页 赔 竺 到 | 页 


图 12-5 表格 全 局 样式 的 效果 
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2. 编写 表格 tbody 第 一 行 . firsttrtd 样式 代码 
CSS 代码 如 下 : 


/x 新 增 以 下 代码 ,实现 table 的 tbody 合并 第 一 行 单元 格 的 效果 x*/ 
.firsttrtd{ 
text-align: right; /x* td 盒子 中 的 内 容 右 对 齐 */ 
padding:0; 
margin:0; 
height:46px; 
line-height:46px; 
font-weight: normal; /* 文 字 不 加 粗 显 示 * / 
letter-spacing:0.02em; /* 使 文字 间距 适当 加 宽 */ 
} 
/* .more 不 在 容器 中 定义 ,目的 是 实现 样式 的 复 用 * / 
.more{ 
color: # ff7000; 
} 
.balancebtn{ 
width:103px; 
height:36px; 
background: # {fff url(. ./images/shoppingbtn. png) no-repeat left top; 
border: none; 
vertical-align:middle;/ * 设置 此 样式 实现 图 片 与 文本 的 垂直 居中 效果 * / 
margin-left:20px; 


效果 如 图 12-6 所 示 。 


我 的 购 牧 车。 您 和 好 的 商品 。 


商品 号 商品 名 价格 数量 操作 
红色 边框 内 即 为 第 二 步 后 实现 的 效果 商品 全 额 息 计 : # 126 40 修 共 节省 : 时 48. 60 
口 20019134 五 月 倩 守 物 滞 ¥16.50 ¥ 7 1 贡 除 | 佳 改 
口 万 代 拓 麻 歌 子 水 晶 之 态 ( 短 明 红 ) ¥138.00 ¥ 5 折 1 划 除 | 他 六 
口 于 下 币 王 发 24 20 和 0 75 折 1 ME | tex 
口 万 代 拓 放歌 子 水 是 之 态 【 透明 红 ) ¥138.00 ¥ 7 新 1 划 除 | 修改 
口 200t9134 五 月 全 家 物 滞 和 16.50 13 0 79 新 1 Ml | ta 
口 互 代 拓 库 驶 子 水 昌之 态 ( 透明 红 》 ¥i38.00¥ 867 折 1 贡 隐 | 位 改 
口 天 24 20 40 15 折 1 Ml | a 
0 万 代 拓 亩 怠 了 水 晶 之 态 (站 明 红 ) 139.00 ¥¥53 00 67 折 1 Wt | 位 芝 
口 人 区 过 王 私 24 ¥20 40 75 折 1 MB | te 
口 万 化 拓 放歌 子 水 是 之 态 (和 过 明 红 ) 139.00 :55 00 61 新 1 Ml | la 
口 和 24 0 0 15 折 1 Ml | ta 


得 一 页 123 .49s0 最 后 一 页 竺 到 1 页 


图 12-6 表格 tbody 第 一 行 . firsttrtd 样式 的 效果 
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3. 编写 表格 tbody 第 二 行 开始 样式 代码 
CSS 代码 如 下 : 
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效果 如 图 12-7 所 示 。 


总 我 的 购物 车 您 先 好 的 商品 。 


商品 号 商品 名 
两 火红 色 边 框 ， 主 要 条 用 样式 夏 用 ， 实 现 表格 夫 头 荣 单 于 去 格 主 体 
单元 格 宽度 齐 宽 
回 20019134 五 月 信 家 拉 汪 
可 | 代 拓 府 于 子 水 晶 之 访 《 话 明 红 ) 
回 可 志 
a 代 括 记 歌 子 水 昌之 恋 《 适 明 红 ) 
回 20019134 五 月 信 家 拉 汪 
回 代 括 记 歌 子 水 昌之 恋 《 适 明 红 ) 
回 it 亚 圳 
回 代打 认 歌 子 水 昌之 恋 《通明 红 ) 
] 或 高 
回 代 拓 府 歌 子 水 晶 之 芒 《透明 红 ) 
| 各 
第 一 页 123 .4950 最 后 一 页 忠 转 到 1 页 名 


12-7 表格 tbody 第 二 行 开始 样式 的 效果 


4. 编写 表格 tfoot 样式 代码 
CSS 代码 如 下 : 


/* 新 增 以 下 代码 ,实现 Table 的 tfoot 部 分 的 效果 * / 
.mycartable tfoot .pages{ 
width:100% ; 
margin:0; 
padding:20px 0; 
} 
.mycartable tfoot .num, .mycartable tfoot .num_ now{ 
margin:0 10px 0 0; 
padding: 5px 5px; 
} 
.mycartable tfoot .num{ 
background: # dbecf4; 
color: #000; 
text-decoration: none; 
} 
.mycartable tfoot .num:hover, .mycartable tfoot .num_now{ 
background: # {ff{7000; 
color: # fff; 
} 
.mycartable tfoot .tiaozhuan{ 
width:20px; 
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text-align: center; 
} 
.mycartable tfoot .golink{ 
color: #000; 
font:14px "Times New Roman", Times, serif; 


} 


效果 如 图 12-8 所 示 。 


汉 我 的 购物 车 您 和 好 的 商品 : 


| 商品 号 商品 名 价格 数量 操作 

再 人 生计: 和 128 40 您 失 节省 : 48.50 og 
20019134 五 月 信物 河 YHe-58 ¥13 00 19 折 1 出 这 | 修改 
万 代 拓 5 认 歌 子 水 昌之 恋 《透明 红 ) Ya8-69- 了 05 00 BT 折 1 出 族 | 人 下 
地 开 帝王 各 Ye4 ¥20 4 75 折 1 删除 | 个 改 
万 代 括 府 歌 子 水 晶 之 恋 (通明 红 ) ¥i38-99- ¥¥99 00 67 折 删除 | 修改 
20019134 五 月 信 家 物语 He-58 13 00 19 折 1 副 除 | 人 改 
五 代 拓 府 歌 子 水 晶 之 六 《 衣 明 红 》 Ha-ee- ¥939 00 67 折 1 删除 | 修改 
加 处 或 帝王 受 Ye4 ¥20 .40 75 折 1 别 隆 | 修改 
互 代 拓 南 歌 子 水 昌之 六 ( 适 明 红 ) Ya8-9- ¥9 00 61 折 1 出险 | 修 比 
加 魅 台 帝王 玻 Ye4 ¥20 40 75 折 1 删除 | 修了 
回 五 代打 府 歌 于 水晶 之 恋 (通明 红 )》 YH58-69- Y05 00 67 折 是 出 隆 | 修改 
凶 杰 这 于 至 Yee ¥20 40 75 折 1 出 队 | 修改 


3 Bn ta |1|n Go 


12-8 表格 tfoot 样式 的 效果 


12.3.2 购物 车 页 表格 隔行 变色 效果 


现在 ,Bill 基本 实现 了 购物 车 页 的 最 终 效果 ,也 对 表格 布局 的 意义 .用 处 、 样 式 等 有 了 
基本 的 了 解 。 接 下 来 ,实现 购物 车 页 的 最 后 一 个 效果 ,就 是 表格 的 隔行 变色 ,让 网 站 更 加 
人 性 化 。 

购物 车 页 中 表格 的 奇数 行 的 背景 色 就 是 网 站 的 背景 色 ,不 用 修改 。 偶 数 行 的 背景 色 
与 奇数 行 的 不 一 致 ,因此 只 要 为 偶数 行 设置 不 同 的 背景 色 样 式 , 即 可 实现 效果 。 

CSS 代码 如 下 : 


/* 新 增 以 下 样式 ,实现 购物 车 页 表格 隔行 变色 效果 * / 
.mycartable tbody .oushutrtd{ 

background-color: # dbecf4; 
} 


通过 以 上 对 购物 车 样式 的 逐步 完善 ,已 经 全 部 实现 最 终 效 果 , 如 图 12-9 所 示 。 
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加 大 | 想 大 | 杞 着 | 四 


可 | 可 天 


3 Ea3 说 当量 操作 | 
商品 全 三 总 计 : 半 125.40 您 共 节省 : 持 46.60 EC 

20019134 五 月 信守 物语 Yes YI 00 79 折 1 和 1 从政 
IHERB (ED Yi Ym 昕 1 C3 
鬼王 帝王 下 Yee ¥20 如 15 白 1 再 | 修改 
三代 括 府 歌 子 水 蝇 之 恋 《 适 B 红 ) a5-99- 了 5 习 虽 67 折 间 | 们 下 
20019134 五 月 信 宗 物语 He-s8 了 13 0 19 白 1 出 计 | 过 让 
抽水 之 训 (4B 红 ) Pon Yn er 1 Wk Lk 
过 yat ¥20 0 TS 新 1 | 信 几 
HR Ye yo oi 1 C3 
E33 Yat yat TS 1 [和 
FH ED sse YE bl 折 1 ME | 
投 王 计 王 爱 Yak ¥20 40 75 折 1 [7 


加 


9 WE wt [1| Go 


图 12-9 设置 表格 隔行 变色 后 购物 车 页 的 最 终 效果 


124 任务 拓展 


本 任务 的 重点 是 通过 CSS 样式 实现 细 线 表格 设计 和 隔行 变色 效果 。 

根据 对 整个 项 目 所 有 页 面 的 分 析 , 不 难 发 现 , 除 购物 车 页 外 ,用 户 注册 页 ,用户 登录 页 
等 还 是 需要 使 用 表格 来 进行 布局 。 在 实现 本 项 目的 服务 器 端 功能 时 ,使 用 表格 进行 布局 
设计 ,会 大 大 地 降低 工作 量 ,提高 工作 效率 。 


12.4.1 用 户 登 录 页 样式 


本 任务 的 拓展 任务 就 是 要 求 读者 自行 完成 本 项 目 中 的 用 户 注册 页 .用户 登录 页 中 的 
表格 效果 。 用 户 登录 页 最 终 效果 如 图 12-10 所 示 。 


叮当 网 ， 全 球 领先 的 中 文 网 上 书店 


更 多 选择 
60 万 种 图 书 音像 ， 并 有 家 居 百 货 、 化 妆 品 、 数 码 等 几 十 个 类 别 共计 百 万 种 商品 ，2000 个 用 户 登 录 
入 精品 店 中 店 -si 地 址 或 昵称 
更 低 价格 : 
电视 购物 的 3 一 5 折 ， 传 统 书店 的 5 一 ? 折 ， 其 他 网 站 的 ?一 9 折 

登录 ] 
更 方便 、 更 安全 
全 国 起 过 300 个 城市 送 货 上 门 、 货 到 付款 . 鼠标 一 点 ， 零 风 了 购物 ， 便 捷 到 家 - 

念 还 不 是 叮当 网 用 户 ? 
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12.4.2 ”用户 注册 页 样式 


用 户 注 册页 的 最 终 效 果 如 图 12-11 所 示 。 
叮当 网 ， 全 球 领先 的 中 文 网 上 书店 


以 下 均 为 必 填 项 
+ 请 填写 您 的 Enwil 地 址 : 
+ 设置 个 在 叮当 同 的 昵称 
+ 设置 密码 ; 
再 次 输 入 修 设 置 的 密码 ; 


ED 


图 12-11 用 户 注册 页 最 终 效果 图 


125 任务 小 结 


通过 本 任务 的 学 习 和 实践 ,Bill 已 经 基本 掌握 了 使 用 CSS 样式 对 表格 进行 设置 的 方 
法 ,包括 细 线 表格 的 设计 和 表格 隔行 变色 的 设计 等 。 通 过 本 任务 中 Bill 关于 表格 的 分 析 
和 描述 ,读者 应 该 掌握 表格 布局 应 该 用 在 什么 地 方 ,希望 广大 读者 能 够 举一反三 ,灵活 应 
用 。 在 Web 2.0 时 代 , 不 要 完全 抛弃 表格 布局 ,应 该 是 DIV 布局 跟 表格 布局 相 结合 ,二 者 
相辅相成 ,才能 提高 自己 的 工作 效率 。 


126 能 力 评 估 


. 如 何 实现 细 线 表格 ? 应 采用 何 种 样式 ? 
. 如何 实现 表格 隔行 变色 ? 

. 表格 布局 有 何 优势 ? 有 何 缺 点 ? 

. 何 时 用 DIV 布局 , 何 时 用 表格 布局 ? 


上 上 性 
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网 站 的 人 机 交互 


任务 如 人 钉 当 网 上 书店 "表单 验证 交互 


至 此 ,“ 叮 当 网 上 书店 ”项 目的 设计 与 制作 已 经 基本 按照 网 站 项 目 开 发 的 标准 化 流程 
接近 尾声 , Bill 已 经 把 项 目的 所 有 页 面 制 作 完 成 ,并 对 Web 2. 0 下 的 前 端 技 术 ( 包 括 
Photoshop、XHTML、CSS) 有 了 一 定 的 知识 理解 和 技能 掌握 ,对 静态 网 站 项 目的 设计 制 
作 与 开发 流程 有 了 一 定 了 解 ,从 而 迈 入 Web 前 端 技术 开发 的 大 门 。 

是 不 是 掌握 以 上 的 Web 前 端 开 发 技能 就 可 以 完全 适应 社会 岗位 的 需求 了 呢 ? 是 不 
是 就 可 以 成 为 一 个 合格 的 Web 前 端 工 程 师 了 呢 ? 答案 是 否定 的 。 因 为 Web 前 端 技术 的 
发 展 非常 迅速 ,要 适应 日 新 月 异 的 IT 技术 岗位 ,必须 及 时 了 解 新 技术 的 发 展 动向 ,并 及 
时 学 习 新 的 知识 和 技能 。 本 任务 的 主要 目的 就 是 介绍 社会 岗位 和 人 才 需 求 的 标准 。 要 想 
真正 成 为 一 名 合格 的 Web 前 端 工程 师 或 合格 的 Web 前 端 高 级 工程 师 , 还 需要 学 习 目 前 
主流 的 新 技术 和 新 知识 一 一 jQuery 和 Ajax 等 。 

本 任务 中 ,Bill 将 采用 jQuery 技术 实现 项 目 中 用 户 注 册页 面 的 表单 验证 交互 ,并 通 
过 jQuery 提供 的 相关 功能 来 实现 网 站 项 目 制作 与 开发 中 的 各 种 交互 效果 。 

人 学 习 目标 

(1) 掌握 jQuery 语法 知识 。 

(2) 掌握 jQuery 表单 验证 的 相关 方法 。 

(3) 掌握 采用 jQuery 实现 用 户 注 册页 表单 验证 交互 的 方法 。 

(4) 掌握 jQuery 结合 Ajax 进行 交互 实现 的 方法 。 
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网 站 的 交互 功能 有 很 多 ,现在 随便 打开 一 个 电子 商务 平台 的 门户 网 站 , 映 入 眼帘 的 都 
是 交互 效果 。 这 些 交互 效果 ,可 以 很 好 地 吸引 用 户 的 眼球 , 牢 牢 地 把 用 户 留 在 自己 的 网 站 
上 。 对 于 电子 商务 平台 来 说 ,用 户 就 是 潜在 的 客户 ,客户 就 是 赢利 的 源泉 ,因此 ,交互 效果 
的 好 坏 直接 影响 着 整个 网 站 的 命脉 。 

目前 网 站 上 常用 的 一 些 交 互 效果 ,如 弹出 菜单 .图 片 轮换 、 弹 出 层 、 滑 动 门 、 图 片 展 示 、 
表单 交互 等 都 是 由 主流 的 jQuery 技术 实现 的 。jQuery 技术 本 着 “write less, do more” 
( 写 得 更 少 , 做 得 更 多 ) 的 核心 理念 ,非常 适合 各 个 层次 的 人 学 习 和 使 用 。 本 任务 通过 用 
户 注册 页 的 表单 验证 交互 ,让 读者 接触 jQuery, 并 使 用 jQuery 实现 网 站 的 各 种 交互 
效果 。 
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表单 验证 就 是 把 用 户 在 表单 信息 中 填写 的 数据 提交 给 服务 器 端 处 理 前 对 数据 合法 性 
进行 校 验 的 一 种 功能 。 表 单 验证 分 为 两 种 : 客户 端 验证 和 服务 器 端 验证 。 本 任务 采用 
jQuery 技术 来 实现 的 表单 验证 属于 客户 端 验 证 。 本 任务 实施 前 用 户 注册 页 未 实现 表单 
验证 时 的 原始 效果 如 图 13-1 所 示 。 


叮当 网 ， 全 球 领先 的 中 文 网 上 书店 
以 下 均 为 必 十 项 


+ 请 博 写 爷 的 Email 地 址 : |123456 
“设置 您 在 叮当 同 的 昵称 : aa 

+ 设置 密码 : = 

再 次 输入 您 设置 的 密码 ; ma 


Er 
图 13-1 用 户 注册 页 未 实现 表单 验证 时 的 效果 


如 果 表 单 提交 时 ,没有 任何 表单 验证 ,直接 就 把 表单 数据 提交 给 服务 器 进行 处 理 ( 比 
如 插入 、 修 改 等 ), 就 会 在 表单 提交 数据 的 统一 性 、 合 法 性 和 安全 性 等 方面 存在 着 严重 的 问 
题 , 因 此 而 存在 的 风险 和 后 果 也 是 不 可 预计 的 。 要 解决 这 样 的 风险 ,表单 验证 是 网 站 和 软件 
研发 中 不 可 或 缺 的 功能 。 本 任务 实施 后 的 客户 端 表单 验证 的 效果 如 图 13-2 所 示 。 


叮当 网 ， 全 球 领先 的 中 文 网 上 书店 
以 下 均 为 必 填 项 


+ 请 请 写 人 ypnwil 地 址 : 123455 邮件 本 式 错误 
+ 设置 您 在 叮当 网 898 称 : aaaaa v 
设置 宙 码 : — YY 
再 次 输入 您 设置 的 中 码 : 一 两 次 密 到 不一致 
注册 


13-2 用户 注册 页 实现 表单 验证 后 的 效果 
读者 可 以 发 现 ,如 果 在 表单 中 输入 的 数据 不 符合 规定 的 格式 ,那么 数据 就 无 法 通过 表 
单 提交 给 后 端 服务 器 处 理 ; 如 果 在 表单 中 输入 的 数据 符合 规定 的 格式 ,那么 数据 就 可 以 
正常 的 通过 表单 提交 给 后 端 服务 器 。 


132 相关 知识 


13.2.1 jQuery 概述 


jQuery 于 2006 年 1 月 由 美国 人 John Resig 在 纽约 发 布 . 它 吸引 了 来 自 世 界 各 地 的 
众多 JavaScript 高 手 加 入 ,由 Dave Methvin 率领 团队 进行 开发 。 如 今 ,jQuery 已 经 成 为 
最 流行 的 JavaScript 框架 ,在 世界 前 10000 个 访问 最 多 的 网 站 中 ,超过 55% 在 使 用 
jQuery。 
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jQuery 是 免费 .开源 的 ,使 用 MIT 许可 协议 。jQuery 的 语法 设计 可 以 使 开发 者 更 加 
便捷 ,例如 操作 文档 对 象 .选择 DOM 元 素 、 制 作 动画 效果 、 进 行事 件 处 理 、 使 用 Ajax 以 及 
其 他 功能 。 除 此 以 外 ,jQuery 提供 API 让 开发 者 编写 插件 。 其 模块 化 的 使 用 方式 使 开发 
者 可 以 很 轻松 地 开发 出 功能 强大 的 静态 或 动态 网 页 。 

jQuery 具有 以 下 特点 。 

(1) 动态 特效 。 

(2) Ajax。 

(3) 通过 插件 来 扩展 。 

(4) 方便 的 工具 ,如 浏览 器 版 本 判断 。 

(5) 渐进 增强 。 

(6) 链 式 调用 。 

(7) 多 浏览 器 支持 ,支持 Internet Explorer 6. 0 十 ,Opera 9. 0 十 、Firefox 2 十 、Safari 
2.0 十 .Chrome 1.0 十 (在 2.0.0 中 取消 了 对 Internet Explorer 6/7/8 的 支持 ) 。 


提示 : 目前 网 络 上 针对 jQuery 的 交互 效果 有 很 多 ,读者 在 以 后 的 网 站 开发 中 ,可 以 
通过 搜索 引擎 查找 各 种 jQuery 交互 效果 ,然后 根据 自己 的 实际 开发 需要 进行 适当 修改 
和 


13.2.2 jQuery 文件 下 载 


要 使 用 jQuery 实现 客户 端 表 单 验证 ,必须 要 包含 两 个 jQuery 文件 ,一 个 是 jQuery 
的 版 本 文件 jquery. js; 另 一 个 是 jQuery 的 验证 控件 jquery. validate. js 文件 。 这 两 个 文 
件 可 以 通过 jQuery 的 官网 进行 下 载 , 版 本 比较 丰富 ,读者 可 以 按照 自己 的 需求 进行 下 载 ， 
适用 单机 开发 。 也 可 以 从 多 个 公共 服务 器 选择 使 用 ,把 jQuery 存储 在 CDN 公共 库 上 可 
加 快 网 站 载 人 速度 。CDN 公共 库 是 指 将 常用 的 JavaScript 库存 放 在 CDN 节点 ,以 方便 
广大 开发 者 直接 调用 。 与 将 JavaScript 库存 放 在 服务 器 单机 上 相 比 ,CDN 公共 库 更 加 稳 
定 、 高 速 。 国 外 的 有 Google、Microsoft 等 多 家 公司 为 jQuery 提供 CDN 服务 ,国内 由 新 
浪 云 计算 (SAE) 、 百 度 云 (BAE) 等 提供 。 


13.2.3 jQuery 验证 函数 


jQuery 验证 控件 自 带 了 一 些 验证 规则 ,方便 读者 在 表单 验证 时 使 用 。jQuery 自 带 的 
验证 规则 如 表 13-1 所 示 。 


表 13-1 jQuery 自 带 的 验证 规则 表 


内 置 验证 方法 名 称 返回 值 类 型 功能 描述 
required() boolean 必 填 验证 元 素 
required( dependency-expression) boolean 必 填 元 素 依 赖 于 表达 式 的 结果 
required( dependency-callback) boolean 必 填 元 素 依赖 于 回调 函数 的 结果 
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续 表 
内 置 验证 方法 名 称 返回 值 类 型 功能 描述 
remote(url) boolean 请 求 远 程 校 验 。url 通常 是 一 个 远程 调用 方法 
minlength(length) boolean 设置 最 小 长 度 
maxlength(length) boolean 设置 最 大 长 度 
rangelength(range) boolean 设置 一 个 长 度 范围 [min,max] 
min(value) boolean 设置 最 大 值 
max(value) boolean 设置 最 小 值 
email() boolean 验证 电子 邮箱 格式 
range(range) boolean 设置 值 的 范围 
url(O) boolean 验证 URL 格式 
ei Es 验证 日 期 格式 (类 似 30/30/2008 的 格式 ,不 验证 
日 期 准确 性 只 验证 格式 ) 
dateISO() boolean 验证 ISO 类 型 的 日 期 格式 
dateDE() boolean 验证 德 式 的 日 期 格式 (29. 04. 1994 或 1.1.2006) 
number() boolean 验证 十 进 制 数字 (包括 小 数 ) 
digits() boolean 验证 整数 
creditcard() boolean 验证 信用 卡号 
accept(extension) boolean 验证 相同 后 级 名 的 字符 串 
equalTo(other) boolean 验证 两 个 输入 框 的 内 容 是 否 相同 
phoneUS() boolean 验证 美式 的 电话 号 码 
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针对 以 上 的 验证 规则 ,jQuery 有 默认 的 提示 信息 ,例如 : 


messages: { 


required: "This field is required.", 

remote: "Please fix this field. ", 

email: "Please enter a valid email address."， 

url: "Please enter a valid URL.", 

date: "Please enter a valid date.", 

dateISO: "Please enter a valid date (ISO).", 

dateDE: "Bitte geben Sie ein geltiges Datum ein.", 

number: "Please enter a valid number.", 

numberDE: "Bitte geben Sie eine Nummer ein.", 

digits: "Please enter only digits", 

creditcard: "Please enter a valid credit card number.", 

equalTo: "Please enter the same value again."， 

accept: "Please enter a value with a valid extension.", 

maxlength: $ . validator. format("Please enter no more than {0} characters."), 

minlength: $ .validator.format("Please enter at least {0} characters."), 

rangelength: $ . validator. format( "Please enter a value between {0} and {1} characters 
long. "), 

range: $ .validator.format("Please enter a value between {0} and {1}."), 

max: $ .validator. format("Please enter a value less than or equal to {0}."), 

min: $ .validator. format("Please enter a value greater than or equal to {0}.") 
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如 果 需 要 修改 ,读者 可 以 新 建 Java Script 脚本 文件 ,然后 再 在 页 面 中 引用 该 文件 , 修 
改 的 代码 格式 如 下 : 


jQuery.extend(jQuery. validator. messages, { 
required: " 必 选 字段 "， 
remote: "请 修正 该 字段 "， 
email: "请 输入 正确 格式 的 电子 邮件 "， 
url: "请 输入 合法 的 网 址 "， 
date: "请 输入 合法 的 日 期 "， 
dateISO: "请 输入 合法 的 日 期 (ISO)."， 
number: "请 输入 合法 的 数字 "， 
digits: "只 能 输入 整数 "， 
creditcard: "请 输入 合法 的 信用 卡号 ”， 
equalTo: "请 再 次 输入 相同 的 值 "， 
accept: "请 输入 拥有 合法 后 级 名 的 字符 串 "， 
maxlength: jQuery. validator. format(" 请 输入 一 个 长 度 最 多 是 {0) 的 字符 串 ")， 
minlength: jQuery. validator. format(" 请 输入 一 个 长 度 最 少 是 {0) 的 字符 串 ")， 
rangelength: jQuery. validator. format(" 请 输入 一 个 长 度 介 于 {0} 和 {1} 之 间 的 字符 串 ")， 
range: jQuery. validator. format(" 请 输入 一 个 介 于 {0} 和 {1} 之 间 的 值 ")， 
max: jQuery. validator. format(" 请 输入 一 个 最 大 为 {0} 的 值 ")， 
min: jQuery. validator. format(" 请 输入 一 个 最 小 为 {0} 的 值 ") 


13.2.4 jQuery 验证 代码 结构 


jQuery 验证 代码 是 指 采用 jQuery 语法 中 的 选择 器 来 控制 操作 对 象 ,用 事件 处 理 机 
制 来 实现 表单 验证 交互 行为 的 一 段 代码 。 目 前 ,网 络 上 有 很 多 这 样 的 验证 代码 ,虽然 代码 
编写 的 结构 不 是 完全 一 致 ,但 都 是 为 了 实现 客户 端的 表单 验证 。 下 面 是 一 种 常用 的 验证 
代码 块 结构 。 


script type= "text/javascript"> 
$ (document) .ready(function(){ 
// 通 过 选择 器 选择 文档 对 象 , 当 页 面 加 载 完成 后 ,触发 ready 事件 
var validator 一 $ ("#registerform").validate({ 
人 * 选择 要 验证 的 .form 的 id, 非常 重要 干 万 不 能 写 错 必须 跟 要 验证 的 .form 标签 的 
id 属性 值 相同 */ 
debug: false, //debug 设置 为 true, 将 只 验证 表单 ,不 提交 表单 数据 ,用 在 调试 时 
ignoreTitle:true, 
rules: { // 验 证 的 规则 ,多 个 规则 之 间 用 逗号 隔 开 ,最 后 一 个 规则 不 加 逗号 
// 验 证 规则 
)}， 
messages: { // 验 证 的 消息 ,用 法 同 rules 
// 验 证 信息 
be 


errorPlacement: function(error, element) { 
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error. insertAfter(element. parent() .find('"label:first7); 
}, 
success: function(label) { 
label.html("").addClass("ok");  // 添 加 ok 样式 表 给 label 控件 
} 
}); 
}) 
</script> 


以 上 代码 结构 比较 清晰 和 简单 。 在 应 用 时 只 要 把 以 上 代码 块 放 在 要 验证 表单 页 面 的 
过 head 二 和 过 /head> 之 间 即 可 。 只 要 对 以 上 代码 块 进 行 适当 的 修改 ,就 可 以 实现 对 任何 
表单 的 验证 。 要 修改 的 地 方 有 3 处 : form 表单 的 id 属性 值 .rules 规则 和 messages。 


13.2.5 jQuery 样式 效果 


本 任务 最 后 一 个 知识 点 ,就 是 对 验证 信息 进行 CSS 样式 处 理 。 网 络 上 也 有 很 多 类 似 
的 效果 ,下 面 是 一 种 常用 的 样式 效果 。 


/* 本 处 的 样式 都 是 对 提示 信息 显示 标签 label 的 控制 * / 
label { 
font-size: #000 12px bold; 
text-transform: uppercase; 
display: block; 
float:right; 
height: 30px; 
line-height :30px; 
margin-right: 5px; 
} 
label. required : before {/ * before 伪 类 样式 ,与 超 链接 伪 类 类 似 , 如 a:hover*/ 
vertical-align: middle; 
color: red; 
} 
label.ok { 
width:16px; 
background:url(". ./images/valid. gif") no-repeat left center; 
padding: 0px; 
} 
label. error { 
color: # d00; 
text-transform: none; 
margin-left:6px; 
} 
label. choice { 
vertical-align: middle; 
font-weight: normal; 
text-transform: none; 
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在 应 用 时 ,将 以 上 代码 放 在 外 部 CSS 文件 中 (如 jquery. css) ,然后 在 表单 验证 页 面包 


所 
只 


只 要 修改 背景 图 片 的 路 径 即 可 。 


133 任务 实施 


含 该 样式 。 将 样式 中 使 用 的 背景 图 片 放置 在 项 目 站 点 的 图 片 文件 夹 中 ,如 果 路 径 不 一 致 ， 


有 了 以 上 的 jQuery 表单 验证 的 知识 储备 ,要 实现 jQuery 表单 验证 就 是 一 件 轻松 的 
事情 了 。 下 面 Bill 将 分 步 完 成 本 任务 。 用 户 注 册页 中 表单 区 域 的 XHTML 结构 代码 


如 下 : 


<form id="checkregisterform" action="" method= "post"> 
/#* 为 了 让 读者 更 加 立即 ,Bill 将 此 处 form 属性 id 的 值 改 成 了 "checkregisterform"*/ 


<table class= "register_table"> 


<tr> 
二 td class 一 "registertitle" 之 以 下 均 为 必 填 项 一 /td 这 
=/ > 
<tr> 
<td> 
table class= "registertable"> 
<tr> 
二 td 记过 span class 二 "redstar" 这 * 一 /span 过 请 填写 您 的 Email 地 
址 : /td> 
td class= "registerinputtd" > <input name= "email" id= "email" 
type= "text" class= "registerinput"> 
<label class= "required" for="email"></label></td> 
二 td class 王 "registerchecktext" 之 请 填写 有 效 的 E-mail 地 址 ,在 下 一 
步 中 您 将 用 此 邮箱 接收 验证 邮件 。 二 /td 
</t> 
se 
<td><=span class= "redstar"> * </span> 
设置 您 在 叮当 网 的 昵称 : 二 /td 二 
td class= "registerinputtd"> 
=input name= "username" id 一 "username" 
type= "text" class= "registerinput"> 
=label class= "required" for= "username"> 
</label><=/td> 
二 td class 一 "registerchecktext" 过 您 的 昵称 可 以 由 小 写 英 文字 母 . 数 
字 组 成 ,长 度 4 一 20 个 字符 。</td> 
< 到 /tr> 
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i 
二 td 这 二 span class 二 "redstar" 之 x 二/span 设 置 密码 : 之 /td 
td class= "registerinputtd"> 
=input name= "pwd" id="pwd" type="password" 
class= "registerinput"> 
=label class= "required" for="pwd"></label></td> 
二 td class 一 "registerchecktext" 盖 您 的 密码 可 以 由 大 小 写 英文 字母 、 
数字 组 成 ,长 度 6 一 20 位 。 到 /td> 
< 
<t> 
<td><=span class= "redstar"> &.nbsp;=/span> 
再 次 输入 您 设置 的 密码 : 二 /td> 
< 到 td class= "registerinputtd"><input name= "repwd" id 一 "repwd" 
type 一 "password" class= "registerinput"> 
< 到 label class= "required" for="repwd"></label><=/td> 
<td class= "registerchecktext"> &nbsp;=/td> 
> 
tr 
td colspan= "3" class= "registerbottomtd"> 
<input name= "registersubmit" type 一 "submit" value=" 注 册 " 
class= "registerok"></td> 
</tr> 
</table> 
</td> 
</tr> 
</table> 
</form> 


注意 : 以 上 label 标签 中 的 required 样式 就 是 jquery. css 中 的 样式 。 

在 实现 jQuery 表单 验证 之 前 ,还 有 几 项 准备 工作 。 

(1) 将 所 需 素材 复制 至 站 点 文件 夹 。 将 网 上 下 载 的 jQuery 文件 和 jquery. validate. 
js 两 个 JavaScript 脚本 文件 放置 在 站 点 的 js 文件 夹 中 ; 接着 将 jquery. css 样式 文件 放置 
在 站 点 的 css 文件 夹 中 ; 最 后 将 所 用 的 背景 图 片 valid. gif 放置 在 站 点 的 images 文件 夹 
中 ,结果 如 图 13-3 一 图 13-6 所 示 。 


后 :ss 
局 aash 
加 inages 
Bj: 
乱 default htnl Nai 
镜 index htnl 名 称 ~ 
乱 reeister htnl Sjoerrl7.2.nin js 
多 shopping htnl 国 janery validate_pack js 
图 13-3 项 目 站 点 目录 结构 图 13-4 将 jquery 文件 放置 js 文件 来 


224 


任务 13 “叮当 网 上 书店 ”表单 验证 交互 


Ndinedane\ess 
名 称 ~ 
国 janery ess dingdana\images 

团 register css 名 称 = 

国 :hopping css 号 vaaidate gif 
国 :tma css valid gif 


图 13-5 将 样式 文件 放置 css 文件 夹 图 13-6 将 图 片 文件 放置 images 文件 夹 


(2) 在 register. html 中 包含 外 部 文件 。 首 先 通 过 script 标签 包含 外 部 的 JavaScript 
脚本 文件 ,代码 如 下 : 


script type= "text/javascript" src="./js/jquery-1.7.2.min.js"></script> 
script type= "text/javascript" src="./js/jquery. validate_pack.js"></script> 


接着 通过 link 标签 包含 外 部 CSS 样式 文件 ,代码 如 下 : 


<link href="css/jquery. css" rel="stylesheet" type 一 "text/css" /> 


最 后 将 jQuery 表单 验证 的 代码 结构 放置 在 页 面 的 二 head 之 和 过/head 之 之 间 , 代 码 
如 下 : 


<script type= "text/javascript"> 
$ (document) . ready(function() { 
// 通 过 选择 器 ,选择 document 对 象 , 当 页 面 加 载 完成 后 ,触发 ready 事件 
var validator = $ ("#registerform").validate({ 
/* 选择 要 验证 的 form 的 id, 非常 重要 , 千 万 不 能 写 错 , 必须 与 要 验证 的 form 标签 的 这 属 
性 值 相同 * / 
debug :false, //debug 设置 为 true, 将 只 验证 表单 ,不 提交 表单 数据 ,用 在 调试 时 
ignoreTitle: true, 
rules: { // 验 证 的 规则 ,多 个 规则 之 间 用 逗号 隔 开 , 最 后 一 个 规则 不 要 加 逗号 
// 验 证 规则 
}， 
messages: { // 验 证 的 消息 ,用 法 同 rules 
// 验 证 信息 
}， 
errorPlacement: function(error, element) { 
error. insertAfter(element. parent(). find( 'label: first')); 


}, 
success: function(label) { 
label. html(" ").addClass("ok"); // 添 加 ok 样式 表 给 label 控件 
1 
DD; 
)) 
=/script> 


(3) 修改 jQuery 表单 验证 结构 块 代码 。 首 先 对 照 验证 表单 的 form 的 id 属性 值 , 需 
要 进行 适当 的 修改 。 将 jQuery 表单 验证 代码 块 中 的 $(" 井 registerform"). validate 表单 
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form 的 id 属性 修改 成 XHTML 结构 中 form 属性 id 的 值 ( 即 改 为 $(" 井 checkregisterform'") 
.validate) ,以 使 能 够 通过 jQuery 选择 器 ,控制 要 验证 的 表单 对 象 ,实现 表单 验证 。 


13.3.1 表单 不 为 空 的 验证 


接 下 来 实现 本 任务 的 所 有 表单 验证 。 在 jQuery 表单 验证 结构 代码 块 中 加 入 验证 规 
则 和 验证 信息 ,采用 jQuery 自 带 的 验证 规则 required 来 实现 表单 元 素 为 空 验证 。 修 改 后 
的 代码 如 下 ， 
script type=" 
$ (document). ready(function(){ 
// 通 过 选择 器 ,选择 document 对 象 , 当 页 面 加 载 完成 后 ,触发 ready 事件 
var validator 一 $ ("#registerform").validate({ 


人 * 选择 要 验证 的 .form 的 id, 非常 重要 干 万 不 能 写 错 必须 与 要 验证 的 .form 标签 的 


text/javascript"> 


id 属性 值 相同 */ 
debug :false, //debug 设置 为 true, 将 只 验证 表单 ,不 提交 表单 数据 ,用 在 调试 时 
ignoreTitle: true, 
rules: { // 验 证 的 规则 ,多 个 规则 之 间 用 逗号 隔 开 ,最 后 一 个 规则 不 要 加 逗号 
email:{ 


required:true // 添 加 required 规则 , 实现 为 表单 元 素 空 验证 
)， 
username:{ 
required: true 
)， 
pwd:{ 
required: true 
}, 
repwd:{ 
required: true 
} 
)， 
messages: { 
email:{ 
required:" 邮 件 必须 填写 " 
}， 
username:{ 
required:" 用 户 名 必须 填写 " 
}， 
pwd:{ 
required: "密码 必须 填写 " 
}, 
repwd:{ 
required:" 确 认 密 码 必 须 填写 " 
} 
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errorPlacement: function(error, element) { 
error. insertAfter(element. parent(). find( 'label:first')); 
品 
// set new class to error-labels to indicate valid fields 
Success: function(label) { 
label.html("").addClass("ok"); ”// 添 加 ok 样式 表 给 label 控件 
} 
D); 
) 
</script> 


实现 后 , 若 用 户 不 填写 必 填 信息 而 单 击 “ 注 册 ” 按 钮 时 ,触发 元 素 为 空 验证 ,显示 提示 
信息 ,表单 不 提交 数据 给 服务 器 进行 操作 ,如 图 13-7 所 示 。 


以 下 均 为 必 填 项 
”请 填写 你 的 E-mailt 址 ; 邮件 双 须 填写 
“ 设置 您 在 叮当 网 的 W 称 : 用 户 名 参 须 戎 写 
”设置 密码 : 密码 双 须 杆 写 
再 次 策 入 修 设 置 的 密码 : 确认 密码 参 须 填写 


EE 


图 13-7 jQuery 表单 元 素 为 空 的 验证 效果 


13.3.2 表单 邮箱 格式 验证 


对 E-mail 账号 的 验证 ,读者 可 以 采用 jQuery 自 带 的 验证 规则 email 即 可 ,修改 代码 
如 下 : 


script type= "text/javascript"> 
$ (document). ready(function() { 
// 通 过 选择 器 ,选择 document 对 象 , 当 页 面 加 载 完 成 后 ,触发 ready 事件 
var validator = $ ("#registerform").validate( { 
/* 选择 要 验证 的 .form 的 id, 非常 重要 干 万 不 能 写 甸 必须 与 要 验证 的 form 标签 的 
id 属性 值 相 同 */ 
debug:false， //debug 设置 为 true, 将 只 验证 表单 ,不 提交 表单 数据 ,用 在 调试 时 
ignoreTitle:true, 
rules: { // 验 证 的 规则 ,多 个 规则 之 间 用 逗号 隔 开 , 最 后 一 个 规则 不 要 加 逗号 
email:{ 
required: true, 
email:true 
人 /添加 E-mail 规则 实现 邮箱 格式 验证 , 跟 required 规则 之 间 用 逗号 阿 开 
}, 
username:{ 
required: true 


ba 
227 


Web 前 端 开发 项 目 化 教程 


添加 了 邮件 格式 验证 后 ,车 用 户 输入 错误 的 E-mail 格式 ,将 提示 如 图 13-8 所 示 的 
信息 。 


以 下 均 为 必 填 项 

“请 填写 个 的 E-mailt 址 : abed 拖 件 格式 洽 误 | 二 填写 和 的 Em 处， 正 下 一 秒 中 人 入 同比 吉之 芝 妆 答 证 邮件 ， 
WE | | 其 户 考 粤 类 入社 | 全 = 抽 闪 可 由 由 小 三 文字 手 、 办 字 玫 成， 长度 4 291 于 开 . 
“设置 密码 ; 窗 砚 名 筑 入 第 | 王 失 王 访 可 避 册 大 少 司 二 文字 母 、 到 字 姐 下 ,长 及 5- 2 人 
再 次 输入 您 设置 的 密码; 确认 密码 从 须 杆 写 


图 13-8 邮件 格式 错误 
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13.3.3 表单 两 次 密码 相同 验证 


要 对 两 次 密码 输入 的 值 是 否 一 致 进行 验证 ,可 以 采用 jQuery 自 带 的 验证 规则 
equalTo 即 可 ,修改 代码 如 下 : 


script type= "text/javascript"> 
$ (document). ready(function(){ 
// 通 过 选择 器 ,选择 document 对 象 , 当 页 面 加 载 完成 后 ,触发 ready 事件 
var validator 一 $ ("#registerform").validate({ 
/人 * 选 择 要 验证 的 ./ormz 的 友 非常 重要 千 万 不 能 写 筑 必须 与 要 验证 的 .form 标签 的 
万 属性 值 相同 */ 
debug:false， //debug 设置 为 true, 将 只 验证 表单 ,不 提交 表单 数据 ,用 在 调试 时 
ignoreTitle: true, 
rules: { // 验 证 的 规则 ,多 个 规则 之 间 用 逗号 隔 开 , 最 后 一 个 规则 不 要 加 逗号 
email:{ 
required: true, 
Email:true 
人 /添加 E-mail 规则 , 实现 邮箱 格式 验证 , 跟 required 规则 之 间 用 去 号 隔 开 
}, 
username: { 
required: true 
}, 
pwd:{ 
required: true 
}, 
repwd:{ 
required: true, 
equalTo: ” # pwa” 
/此 处 的 值 必须 是 要 进行 比较 的 另外 一 个 控件 的 i 值 
} 
}, 
messages: { 
email:{ 
required: "邮件 必须 填写 "， 
email:“ 邮 件 格式 错误 ” /添加 E-mail 验证 信息 
}， 
username:{ 
required:" 用 户 名 必须 填写 " 
}, 
pwd:{ 
required: "密码 必须 填写 " 
}， 
repwd:{ 
required: "确认 密码 必须 填写 "， 
equalTo: "两 次 密码 不 一 致 ” /添加 equal7o 的 验证 信息 
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errorPlacement: function(error, element) { 
error. insertAfter(element. parent(). find( 'label:first')); 
二 
success: function(label) { 
label.html("").addClass("ok"); ”// 添 加 ok 样式 表 给 label 控件 
} 
)); 
) 
</script> 


添加 了 两 次 密码 是 否 一 致 的 验证 后 , 当 用 户 在 密码 控件 和 确认 密码 控件 中 输入 的 值 
不 一 致 时 ,将 触发 验证 ,效果 如 图 13-9 所 示 。 


以 下 均 为 必 填 项 
“请 填写 您 的 E-maltt 址 : abcd@fds, com bd 
“ 设置 您 在 叮当 网 的 昵称 : 12355| Pa 
“设置 密码 : oooeoeo Pa 
再 次 输入 您 设置 的 密码 ; 两 次 密码 不 一 致 
Ex 


图 13-9 两 次 密码 不 一 致 时 的 效果 
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13.4.1 用 户 自 定 义 jQuery 方法 验证 


在 本 任务 的 3 种 验证 交互 的 实现 中 ,采用 的 验证 规则 都 是 jQuery 自 带 的 ,但 如 果 
jQuery 自 带 的 验证 规则 不 能 满足 要 求 ,就 需要 用 户 自 定义 验证 规则 ,采用 jQuery 提供 的 
addMethod() 方 法 来 实现 。 下 面 通过 一 个 验证 电话 号 码 的 代码 来 介绍 如 何 实现 用 户 自 定 
义 验 证 规则 。 


// 电 话 号 码 验 证 

// 参 数 : isTel 是 用 户 自 定义 验证 规则 的 方法 名 称 

// 变 量 : tel 是 正则 表达 式 

// 方 法 最 后 的 验证 信息 用 户 可 以 随意 修改 

jQuery. validator. addMethod( "isTel", function(value, element) { 
var tel 二 / 疏 d{3,4)-?\d{7,9} $/; // 电 话 号 码 格式 为 010-12345678 
return this. optional(element) | | (tel.test(value)); 


}," 请 正确 填写 您 的 电话 号 码 "); 


方法 定义 后 ,将 其 加 入 jQuery 表单 验证 代码 块 中 的 $ (document). ready (function(){} 
中 即 可 。 这 样 ,用户 就 可 以 调用 自 定 义 的 验证 规则 来 对 表单 控件 进行 验证 。 
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接 下 来 ,请 读者 按照 自 定 义 验证 规则 的 方法 ,独立 完成 用 户 注册 页 中 用 户 昵称 的 验 
证 ,验证 要 求 是 : 昵称 只 能 由 4 一 20 位 的 小 写 英文 字母 数字 组 成 ,如 图 13-10 所 示 。 


以 下 均 为 必 填 项 
“请 寺 写 你 的 E-mailt 址 : 。 | abcasohu co | 
a | 昵称 不 符合 要 求 
“设置 密码 : [ 密码 参 有 填写 
再 i 次 输入 您 设置 的 E: [| 确认 密码 乡 须 菠 写 


攻 梧 


图 13-10 jQuery 表单 验证 : 昵称 只 能 由 4 一 20 位 的 小 写 英文 字母 和 数字 组 成 


13.4.2 采用 jQuery 和 Ajax 实现 无 刷新 验证 


Ajax 即 Asynchronous JavaScript and XML (异步 JavaScript 和 XML) ,Ajax 并 非 缩 
写 词 ,而 是 由 Jesse James Gaiiett 创造 的 名 词 。Ajax 是 一 种 用 于 创建 快速 动态 网 页 的 技 
术 的 代号 。 通 过 在 后 台 与 服务 器 进行 少量 数据 交换 ,Ajax 可 以 使 网 页 实现 异步 更 新 。 这 
意味 着 可 以 在 不 重新 加 载 整个 网 页 的 情况 下 ,对 网 页 的 某 部 分 进行 更 新 。 而 传统 的 网 页 
(不 使 用 Ajax) 如 果 需 要 更 新 内 容 ,必需 重 新 载 人 整个 网 页 面 。 

Ajax 的 工作 原理 如 图 13-11 所 示 ( 以 某 订 书 应 用 为 例 ) 。 


Book order application 


Asynchronous 
LibraryServlet 
XMLHttpRequest Validate 
subscription ID 
JavaScript 
eo Populate 
authors 
Populate 
blish 
Validate View [| 
subscription ID authors 
Populate 
titles 
View View 
publishers titles 


Servlet container 


图 13-11 Ajax 的 工作 原理 


Client browser 
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要 实现 Ajax 的 异步 刷新 技术 ,必须 要 有 服务 器 端的 开发 。 目 前 ,主流 的 B/S 模式 软 
件 开发 的 服务 器 端 语言 有 PHP、ASP. NET、Java 等 ,只 要 学 习 了 任意 一 种 服务 器 端 开发 
技术 ,就 可 以 真正 采用 Ajax 来 实现 异步 刷新 技术 ,提高 软件 的 运行 速度 和 操作 的 人 性 化 。 

如 果 读 者 已 经 掌握 了 一 种 或 多 种 服务 器 端 开发 技术 和 数据 库 开发 的 知识 与 技能 ,就 
可 以 来 实现 完整 的 用 户 注 册 功 能 。 当 用 户 在 进行 注册 操作 时 ,用 户 在 E-mail 账号 控件 中 
输入 的 账号 是 否 可 以 进行 注册 ,E-mail 账号 是 否 已 经 被 其 他 用 户 用 过 的 Ajax 异步 刷新 
表单 验证 ,也 请 读者 独立 完 
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通过 本 任务 的 学 习 和 实现 ,Bill 已 经 理解 和 掌握 了 采用 jQuery 技术 来 实现 客户 端 表 
单 验证 的 技能 ,能 够 为 软件 研发 中 数据 统一 性 ,安全 性 方面 提供 一 定 的 保障 。 本 任务 的 重 
点 和 难点 就 是 实现 jQuery 的 各 种 表单 验证 。 其 中 ,对 jQuery 表单 验证 代码 的 修改 方面 
需要 多 加 注意 和 细心 ,因为 一 个 逗号 错误 就 可 能 导致 整个 验证 的 无 法 实现 。 

随 着 任务 13 的 完成 ,本 书 的 所 有 任务 都 已 经 实现 。 一 方面 学 习 了 Web 2. 0 标准 下 
的 Web 前 端 技术 知识 和 开发 技能 ; 另 一 方面 也 完成 了 “叮当 网 上 书店 ”电子 商务 平台 前 
台 网 站 页 面 效果 和 交互 效果 。 

本 书 乘 着 “从 项 目 中 来 ,再 到 项 目 中 去 ”的 编写 原则 ,采用 “项 目 导 入 ,任务 驱动 ”的 教 
学 设计 思路 ,一 切 都 因为 Web 前 端 技术 的 学 习 和 掌握 是 一 个 需要 不 断 努 力 、 不 断 进 取 的 
过 程 , 需 要 通过 大 量 的 实践 来 提升 。 和 希望 读者 在 此 基础 上 ,在 今后 的 学 习 、 工 作 中 不 断 地 
学 习 新 知识 ,实践 新 技能 ,为 把 自己 培养 成 一 名 真正 的 Web 前 端 高 级 工程 师 而 一 路 向 前 ! 
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1. 什么 是 jQuery? 它 有 哪些 特点 ? 

2. jQuery 有 哪些 自 带 的 验证 规则 方法 ? 其 功能 分 别 是 什么 ? 
3. 归纳 本 任务 中 jQuery 实现 表单 验证 的 步骤 。 

4. jQuery 如 何 实现 用 户 自 定义 验证 规则 ? 

5. 什么 是 Ajax? 其 优点 是 什么 ? 
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